Table free pure CSS layouts

Tables are not evil. They do have a purpose within standards based web design (for the display of tabular data); however they should never be used to create the main layout of an html page (or a Drupal theme for that matter). I never, ever, build table based sites, and I won’t edit or fix them either. (Note: I do convert table based themes to CSS based themes.)

To really understand why tables should never be used you really have to get into the actual code that makes up a table. In its simplest form a table can be created as follows:

<table>
<tr><td>Some content</td>
</tr>
</table>

This is the simplest you can make a table. It doesn’t look so bad at first, but remember this code all adds up to one simple box. Once you try adding in other sections, for example a sidebar, you start creating a mess of html tags that you will be hard pressed to untangle if something goes wrong or if you need to make changes.
To achieve the same result as the code above you can use a fraction of the space and do it with divs.

<div>Some content</div>

See the difference? When you are editing code by hand (and for most dynamic Content Management Systems such as Drupal you have to hand code) having less tags to keep up with is very important.
Furthermore, tables don’t respond predictably to styling. Because the cells of a table are all part of the parent table changes to one part of the table can have unexpected consequences for the whole layout. I don’t really want to take the time to build a web page the wrong way to demonstrate, so if you want to see how nasty the results can be you’ll need to take Dreamweaver for a spin in design mode yourself.

Table based layouts are bad, and any designer that uses them should be avoided. If I sound dogmatic, it is only because the consequences of bad practices of other designers often fall in my lap when I receive web design projects to fix. It’s a nightmare to try to untangle bad code. Please, whatever you do, don’t use tables for layout.