What are CSS tables?
February 19, 2005
NOTE: This article is theoretical – CSS tables are not supported by the browsers yet, and cannot be used. I wrote this article to make a few points and to expose people to lessons learned in software development: that grids are an excellent way to layout user interfaces.
Stefan
–
Grid layout patterns are commonly used in creating software interfaces – in web design we call them ‘tables’.
But today HTML table based layout is generally frowned upon because:
- HTML tables render/display content in a fixed format/style that might not display properly in certain types of browsers.
- Tables semantic meaning is thought to represent tabular data – like a spread sheet. Thus using them for page level layout is just wrong … gosh darn it!
There are other reasons why some web designers will say HTML tables suck:
- HTML tables cause code to be bloated and thus pages will take longer to download.
- HTML tables will make your website less search engine friendly.
- HTML tables will make your websites less accessible.
The last 3 points are myths and should be ignored – I covered that in other articles.
That being said, the first point about tables imposing a fixed format/style (where formatting and structure are intertwined – that’s bad,) is very real and very important. It is so important in fact, that I will do what I can to avoid table based layout despite the extra work and problems this can cause.
It’s a terrible shame
Using a grid/table to create UI’s is intuitive, too bad that table based layouts are so controversial … but there maybe is a light at the end of the web UI tunnel: CSS table layouts.
What the heck are CSS tables?
From the W3C:
‘The CSS table model is based on the HTML 4.0 table model, in which the structure of a table closely parallels the visual layout of the table.’
Now in English:
CSS tables are just a set of CSS attributes that you can apply to (probably) div tags to create a ‘table’. Check out this code snippet and things should clear up:
<div class=”table”>
<div class=”row”>
<div class=”cell”>
<p>Yallow!</p>
</div>
</div>
</div>
This is an official W3C specification, I’m not inventing anything here!
So why invent CSS tables when we have HTML tables?
The answer is simple young grasshoppers: to gain the advantage of table based layout while avoiding the problems (mentioned above) with HTML tables:
- HTML tables format content in a fixed structure that might not render properly in certain browsers.
- Tables semantic meaning is thought to represent tabular data – like a spread sheet. Thus using them for page level layout is just wrong.
CSS tables can’t be used in any browser today, so why mention them?
I have two reasons why I wrote this article:
- To educate people of this long term possibility and maybe to start stirring things up – it would nice to have this web design tool.
- To make a point about grid based layouts: they have merit and should be considered.
Stefan Mischook
