Sigurdhsson

A common part of most web designs on the internet right now, at least the corporate ones, is the table. It is as popular with big companies as it is loathed by standards lovers. Now, don’t get me wrong here, I have no grudge against the table element itself, it is a wonderful element to use when you need to display tabular data. But the first person who came up with using tables for designing must have been a real idiot IMHO. Even though it works and makes everything look the same in every browser, it is bad. And there’s several reasons why it’s bad, too.

It doesn’t make sense
Think about it for a second. Would it make sense to you to do what some people do, and divide a perfectly good list, for which we have a special element, into a series of cells in a table? Didn’t think so. And with screen readers things might get even less logical. Say for example that you have two paragraphs  of text, divided by a horizontal image, and you use a table in your layout. A screen reader would go from cell to cell, like you would normally read a table (a real one), reading the contents of each cell as it goes. So in between your two paragraphs the screen reader will bump into the image, maybe some filler gifs, and lots of other things. There’s no telling what might end up between the two texts! Not good. And company logos being displayed as tabular data doesn’t make sense either.

It takes more space
What, you thought all those 1 pixel large transparent gifs and all that HTML didn’t take any space? Let’s look at an example. Below is a small table design to create two columns next to each other:

<table width="250" cellspacing="0" cellpadding="0" border="0">
<tr>
<td><p>column one</p></td>
<td><p>column two</p></td>
</tr>
</table>

Very messy, not logical nor small or beautiful code. Below is the same thing without using tables:

<div class="content">
<p>column one</p>
<p>column two</p>
</div>

And here is the CSS to go with it, this is what does all the moving, if we don’t have this it’ll just be two paragraphs.

.content{ width: 250px; }
.content p{ float: left; width: 49.9%; }

A lot less messy, don’t you think? It’s actually much smaller too, and that takes a lot of weight off any server. Imagine the bandwidth you save if you have a million visitors every month, and you cut down the size by just one or two kilobytes.

Tables have limits, CSS does not
Creating one-off designs with tables is nearly impossible, which is why all table designs look the same, with the three-column layout and a banner on top. Most designers using tables get stuck in that griddy way of thinking. For example, to make a square display partly outside a table layout you would have to add a whole new column, probably two to balance it, and you would likely have to change a couple of rows in the table too, leading to probably 20 or 30 lines of code added or edited. With CSS you simply add 3 or 4 lines and you’re done! But to really take advantage of the powers of CSS we must think beyond the grids and columns of the old table designs.

We mustn’t forget however, that tables exist for a reason. If you have tabular data to display, use a table. We don’t want to see a bunch of nested divs “deviously styled” to act as a table. So, get out there and move from the table ghetto into the quiet suburbs of web standards. And remember: when in doubt, ask the w3c.

This post was written in english, and is categorized as Ranting, Web Standards.
It was written January 5th, 2007 (12:02 CET) and has two comments.