Sun, 31/08/2008 - 20:41 — horuskol

It's been a web design mantra for years now - tables are for data, not for structure.

The simple reason is that it is easier to apply CSS positioning to elements outside of tables - whereas, moving a table cell has compounding knock-on effects - column and row issues which need to be cleaned up before the table will be valid and display properly again.

Another reason is that tables used for structure do not make use of a lot of the other related elements which help browsers to render the table (colgroups, for example), making them pretty slow to display on a page.

One further reason is that a table is semantically linked with the idea of data - and when creating accessible pages, tying structure to data with this semantic link is confusing, and just wrong.

There are plenty more reasons - and I'm not about to go into details on all of them right now. The ones I have brought up are the most relevant to the following discussion and examples.

Despite these myriad reasons, tables are still a major resort for designers having problems with getting their forms aligned properly and consistently.

Some designers have made some efforts to overcome even this, and here are a couple of solutions which use simple CSS to get the results.