In the web standards world it’s a general rule that HTML tables should only be used for tabular data.

In this post I am assuming you are already using css (as opposed to tables) for layout. If you are interested in learning how to create table-less layouts, check out this article from A List Apart or read Johnathon Snook’s post.

The question that often pops into my mind as I am designing certain features on a website is, “Is this tabular data?” For example, does a 3 column, 5 row grid of links or a 3×3 grid of partner logos really require that tables be used?

On a recent project I got the opportunity to test out that question and discovered some real benefits to using css rather than tables even in table-like structures. Let me explain the scenario:

I designed a press page for a client that consisted of a logo grid linking to articles that had been written about their product. When I designed this grid I decided that since it was technically tabular data I would use a 3 column table, to display the logos. The product was new, so initially there was not a lot of press (maybe 2 or 3 articles).  As the product began to get more popular, more and more sites were reviewing it and soon there were 10 or 12 logos on the press page. With tables, the easiest way to add a logo to the grid was to add it at the bottom of the table. The problem with that approach is that the newer press items were at the bottom of the page instead of the top where they would be noticed.

As the press list grew, the client asked if there was a way to have the grid start with the newest press logo at the top. Now think for a minute about what you’d need to do to get this to work with tables. You’d have to add a new <td> containing the new press logo to the first <tr>. Now there are 4 columns in that row. So you’d copy the last <td> and paste it in the next <tr>.  You’d then have to do the same thing again. Copy the last <td> in the row, paste it in the next <tr>, all the way to the end of the table.  This could obviously be pretty tedious especially since the client was adding new press logos weekly!

Instead what I chose to do was rip this section out of the table and create a div-based “table”. I simply created a container div and then put each listing in its own div starting with the newest and going down from there. Something like this:

<div id=containerDiv”>
<div class=”pressItem”><a href=”link.html”><img src=”image.gif” /></a></div>
<div class=”pressItem”><a href=”link.html”><img src=”image.gif” /></a></div>
<div class=”pressItem”><a href=”link.html”><img src=”image.gif” /></a></div>
<div class=”pressItem”><a href=”link.html”><img src=”image.gif” /></a></div>
<div class=”pressItem”><a href=”link.html”><img src=”image.gif” /></a></div>
</div>

I give the containerDiv id a width in my style sheet:

#containerID {width:600px;}

I float the pressItem class left and give it a width as well:

.pressItem {width:200px; float:left;}

Since the container is 600 pixels wide and each press item is 200 pixels wide, the press items will automatically wrap to the next line after every third item.

Now if I want to add a new press item, I simply add a new div to the top of the list and the whole grid rearranges itself accordingly. The process is much easier and the code is much cleaner than it would be with a table.

You could cut the code down even more by removing the press item divs all-together and adding a class to the anchor tag. Since an anchor tag is an inline element, it can’t accept a width style, but you could fix that by doing the following:

a.pressItem {display:block; float:left; width:200px;}

Try it out the next time you need to add a grid to a page. I think you’ll find it is a much cleaner, more flexible and easier maintained way to get the job done.