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.<\/p>\n
Stefan<\/em><\/p>\n –<\/p>\n Grid layout patterns are commonly used in creating software interfaces – in web design we call them ‘tables’. <\/p>\n But today HTML table based layout is generally frowned upon because:<\/p>\n There are other reasons why some web designers will say HTML tables suck:<\/p>\n The last 3 points are myths and should be ignored – I covered that in other articles. <\/p>\n 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.<\/p>\n It’s a terrible shame<\/strong><\/p>\n 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.<\/p>\n What the heck are CSS tables?<\/strong><\/p>\n From the W3C:<\/p>\n ‘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.’<\/p><\/blockquote>\n Now in English:<\/strong><\/p>\n 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:<\/p>\n\n
\n