This topic is quite old already. Every ‘important’ webdeveloper says to follow standards and don’t use tables for layout as there is CSS. But still, almost all beginners still start at tables. Easy to learn, fast to builld why go to CSS?

Search engines

You want visitors on your site, don’t you? Well, search engines don’t like tables as much as css layouts (as long as you don’t have divitus). This is logical, since data buried away in layers of tags must be less important than data that is right there at the top of your document.

So, take off the tables, and all other extra tags (proper mark up saves code) and your statistics will thank you.

Accessibility

A screenreader assumes that data in a table, is tabular data,so the table itself must be important. You do not want to listen to a page being read out as:

“Table with three columns and nine rows, Table with nine columns and one row, Link, Graphic slash knopnieuws.gif LinkGraphic slash knopoverons.gifLinkGraphic slash knopdiensten.gifLinkGraphic slash knopklanten.gifLinkGraphic slash knopvacatures.gifTable endLinkGraphic”

This is a real example of a working website. It in fact shows another accessibility issue. This site does not use alt attributes for images, resulting in “Graphic slash knopnieuws.gif”. While a simple alt=”news” would’ve done the trick. Are you wondering how your site comes out of a screenreader? Try the Fangs extension for Firefox.

Save bandwidth

It’s not something you notice on a small 20 page do it yourself site, but on large sites bandwidth does become an issue. Now compare this :

<table>
   <tr>
      <td class='a'>1</td>
      <td class='b'>2</td>
      <td class='c'>3</td>
   </tr>
</table>

<div class='a'>1</div>
<div class='b'>2</div>
<div class='c'>3</div>

Well, that’ll show em! I’ve saved at least 3 characters in there. But luckily that’s not all. In the example from fangs there were some menu items in a table (not at all a rare sight). So, let’s do that in CSS.

<a href="#">a</a>
<a href="#">a</a>
<a href="#">a</a>

CSS:
a {
   display :block;
}

That looks better. The css file will be cached and thus only loaded once, so especially on larger sites this will make a significant difference. And, by making setting the display to block I can give a width and height and all other information a table cell has directly to the link. Pretty nifty don’t you think? This is where you’ll really save some bandwidth.

Maintenance

Sergio Villarreal did a test to find out which was better, tables (all old style html) or css (all css). He also kindly provided the source code for that site. The table version is just horrid. It’s nested table in table in table and uses the ’spacer.gif’. The css however is lean and mean code. Which doesn’t work properly in all browser. Meaning, it’ll take some more tinkering.

Still, if you’re hired to build a site, and maintain it after, you’d do good to get working on your css skills, as it’ll save you a lot of looking for lost tags.

Standards

So, what do the standards say about this? In HTML 3.2 tables were still for layouts. The specs of html 4.0 say the following :

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

And, according to rfc 2119 should not means, recommended, but there may be valid reasons to break follow this rule.
So, if you feel that your layout is undoable with css, using tables is following standards.

Degrade gracefully

If you use a proper css layout your site can be views by all older browsers as well, some might not show all fancy things, but at least you get your data across. Tables on the other hand show quite ok in most browers, they don’t need to degrade gracefully, as they just work.

Conclusion

There are a lot of CSS purists out there, that totally shun the use of any and all tables for layout. Personally, i’m still not convinced. There are a lot of places where a table is just so much easier. You can find extensive tutorials on how to do a floating 3 column layout in css, with setting margins, and other sorts. But, in that case i’d opt for the “should not” use tables for layout as said in the html 4.0 specs.

You shouldn’t use tables if there is a better solution, but if it requires 50 lines of codes, and fixing a lot of crossbrowser bugs, a table might just save your free afternoon.

Related posts

Google code webstats
Hand coding or WYSIWYG?
URL rewriting with Apache's <tt>mod_rewrite</tt>
CSS box model
Semantically rich mark up

This entry was posted on Tuesday, March 21st, 2006 at 12:52 by Sonja Duijvesteijn and is filed under Webdevelopment, CSS, SEO, Accessibility. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.