KillerSites Blog

CSS

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:

  1. HTML tables render/display content in a fixed format/style that might not display properly in certain types of browsers.
  2. 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:

  1. HTML tables format content in a fixed structure that might not render properly in certain browsers.
  2. 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:

  1. To educate people of this long term possibility and maybe to start stirring things up – it would nice to have this web design tool.
  2. To make a point about grid based layouts: they have merit and should be considered.

Stefan Mischook

read more