Tables: use or don’t use

van Rumste Kenneth — Tue, 16 Sep 2008 16:38:32 +0000

When creating a more complex table the last few days, I noticed that it is very useful to create them with the different additional elements: tbody, thead, tfoot, col, th, td, etc…
In order to create a table in your webpage, it is not required to use these elements but when using css and trying to put a layout on a table, they are very handy.
For example you can, by using the display property, specify the function of all the elements:

TABLE { display: table }
TR { display: table-row }
THEAD { display: table-header-group }
TBODY { display: table-row-group }
TFOOT { display: table-footer-group }
COL { display: table-column }
COLGROUP { display: table-column-group }
TD, TH { display: table-cell }
CAPTION { display: table-caption }

TFOOT will always be displayed as the bottom row of a table and most of the time contains totals.
THEAD contains the header information of a table.

Not really a very interesting post, but I just love it when using a bit more complex css on tables. It makes the tables easy to manage and they are tons more readable in code.

The thing me and my colleagues noticed is that tables aren’t very good for web design; they are created to display data and not a whole site or newsletter. A few years ago everybody started creating sites in tables because they were easy to set up, and looked great in a few hours. But the horrible time starts when you need to change layout after worth. In the most cases you’ll end up with a table that contains a table that contains another table. I guess you get the picture and that they are very difficult to manage. By experience we can tell that they are not very layout friendly and readability sucks.

We started using divs and with good css you can do anything.
Take a look at it, we recommend it.

devexp » tfoot

Tables: use or don’t use