Contrary to popular belief among many new webmasters, the use of tables in web design is still completely acceptable. The only real problem with using tables, is that many do not know when or how to use them. Most of us know that we use tables to show data, as if in a an excel file, but where the argument often comes in is when tables are used in our layout.

Using Tables to Show Layout

Using tables to format layout is where many have an issue of, and are not really sure when it is OK to use. Tables in layout should be used when the content needs to be in a linear format, such as a series of paragraphs. This management training site had a great example. If you look at their code, you will noticed that there is no structural markup. Markup is not required when using tables to show the sites layout.

Using a table in design your sites overall template is a poor idea at best, and should be avoided. Though it may seem easier at first, this may make things harder for the user. A simple example would be the use of the tab key. Many use the tab key to scroll through content. When tabbing through content on a table designed site, it will bounce a visitor all over the place (top to bottom per column), and not simply move the visitor down like it would if DIV tags had been used.

Using Tables to Show Data

Using tables to show data would be the primary reason to use them. Common mistakes to make within these types of tables are the improper identification of the headers within the table, and the simple lack of markup. Here are some basic tips to create a professional table to show data.

• <table> – When first starting the table make sure to include a brief summary. An example is <table summary=”Summary of my table”>
• <caption> – This is the caption you would like to include with the table
• <tr> – Simply identify a new row
• <th> – This is to identify the column with its header title. An example is <th scope=”row, rowgroup, col, or colgroup”>Header Title</th>. Only pick one of the items in the scope section.
• <td> – This is where the data goes.

A basic example:

<table border=”1″ summary=”An example table”>
<caption>This is my caption example</caption>
<tr>
<th>Column 1</th><th>Column 2</th>
</tr>
<tr>
<td>data</td><td>data</td>
</tr>
</table>

This is my caption example

Column 1	Column 2
data	data

So basically, it’s OK to use tables, just not for a sites template or overall design. Leave this for the DIV tag.