Tables vs. Div Tags

Div tags are the most important and versatile layout or structural element in HTML. You should plan to design all your Web pages with a div structure and not use a table structure for layout.

Problems with Table Tags for Layout

While the table tag may appear to be an easier structural element to layout your Web pages, there are several reasons to avoid table tags for layout.

Consider this long list of issues with tables:

  1. Editing the content (for example, adding or taking away some text) on tables in Dreamweaver or elsewhere usually causes the tds (cells) or rows to change size. This will then require you to fix the size, row by row, or cell by cell.
  2. Tables don't degrade gracefully (i.e., work well) on browsers that are text-only or devices like cell phones that have small screen browsers.
  3. Tables load slower than divs with CSS positioning.
  4. Positioning ability with tables is limited.
  5. Browsers inconsistently display table properties. This is an issue with divs as well, but the inconsistencies are not on the magnitude of the problems displaying tables.
  6. All the tds of the table require height and width adjustments to display content properly, otherwise tables from page to page will have different content placement. Visual consistency is not easy to maintain with tables throughout your site.
  7. Correcting the inconsistencies in table display routinely requires page by page adjustment of the tables which is time consuming.
  8. Presentational data and content are mixed in the table (not separate as they are with div tags) which means the page will load slower with table layout, and your Web page file sizes will tend to be larger.
  9. Tables load the content into the browser from left to right and top to bottom. There is no way to control the display order.
  10. There is more HTML code required to construct a table which increases your ratio of code to content on the page. This can negatively affect your search engine placement with some search engines, including Google.
  11. Tables do not print well.
  12. The Web standard layout element is the div tag, not the table tag. Modern browsers are designed to render based on Web standards.

In other words, if it wasn't clear from that list above, follow this one rule: don't use tables to layout your Web pages.

Div tags are industry-standard and you will not be taken seriously as a Web designer among your designing peers if you continue to use table tags for layout.

Instructor Note:
You can still use tables, just use them for tabular data as they were intended, and not for Web page layout. I also like to use them to contain form fields on form pages because forms lend themselves to the row and column separation that tables were meant for.

Basic table tags

In this example, you want to create a table with 3 columns and 2 rows. Here is how you would write table tags in the HTML code:

<table border="1">
   <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
   </tr>
   <tr>
      <td>Cell 1</td>
      <td>Cell 2</td>
      <td>Cell 3</td>
   </tr>
   <tr>
      <td>Cell 4</td>
      <td>Cell 5</td>
      <td>Cell 6</td>
   </tr>
</table>

The result would be something like this:

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

You would refer table cell as the space where the column and row meet. <tr> stands for table row and <td> stands for table division (column).

Structure of an HTML table consists of the following tags:

Creating Accessible Tables

Assistive technologies such as screen readers, read tables from left to right through each row, from the top row to the bottom one. If you have merged or split cells in the table, that could confuse the reading order.

See examples of good and bad tables for screen reading software.


More information on creating accessible tables can be found on the WebAIM website.

Refining your Table

There are a few attributes you can add to the Table tag to refine it.