Thursday, February 15. 2007
Put a Stop to Table Based Layout!
First let me explain what table based layout is all about. Before the era of Netscape and Internet explorer version 4 we already used tables to create complex layouts for our web sites. We use tables to create separate containers (cells) that allow us to place our content exactly where we want it. Best of all we could stretch these cells to fill up the available space so that everything is aligned nicely.
E.g. tables allow us to have a small column on the left with the site’s navigation links while the main content is in a second column taking up the rest of the screen. Perhaps you used to add a row above these two columns spanning them both to show the site’s title and a banner.
I do a lot of web applications which, basically, use this kind of layout. And I used to do this with tables, just the way as you are probably still doing, not realizing that there are better, more efficient, cleaner ways to do it. A friend opened my eyes a few years back and for that I am thankful. Now let me open your eyes so you can be thankful to me 
Nowadays tables should be used for one thing and one thing only, to display tabular data. For all the rest we have been blessed with Cascading Style Sheets or CSS for short. Perhaps you’ve used it before to have some pretty fonts and colors for your website. Then you’ve only scratched the surface of what CSS is all about.
Abusing tables the way we have done for so many years is wrong for a number of reasons of which I will give you a couple here:
- Your site will be less accessible. Narrators don’t know how to read your content that is locked up in table cells.
- Complex table structures are hard to understand, to maintain and are not flexible at all. Imagine you need to add an extra column somewhere deep down in your table structure. It costs a lot of effort to fix widths and adjust colspan values all over the place.
- A page designed with tables contain considerable more markup code than the same page with CSS as demonstrated in the article “Throwing Tables out the window”.
You should become best friends with the div tag and float will be the magic style property that you will learn to love. As described in the HTML specification the div “offers a generic mechanism for adding structure to documents” And that is exactly what you should be doing, adding structure to your documents not tables.
Separate layout from content more easily by adding structure to your content. Use div tags to group relevant information. In conjunction with class or id attributes you can then make that information look pretty by the use of styles. A HTML document that is stripped from its style sheet should still be able to present the information in a consistent way.
To get an idea of what I’m rambling about you should have a look at the CSS Zen Garden. They have created a well structured HTML document and present that same document in a number of different ways only by changing the style sheet that is used.
There are several techniques to create the same layout with CSS as we have discussed above with tables. I’m not going to reproduce a complete tutorial on how to do such a thing when there are so many already. Search the web for “Two column layout” and you will find everything you’re looking for. One tutorial I particularly like to point out is the one at http://www.maxdesign.com.au/presentation/page_layouts/
I hope I’ve convinced you to at least try to change the way you work. Too often I see someone using a table based layout despite the fact that there are better alternatives for at least a decade now. It’s time to move on! At first it will be a bit more difficult, but once you’ve tried and understand the CSS that is used you are going to love it. Let go of the tables and embrace the style sheet based layout method.
Further reading:
-
Why tables for layout is stupid
http://www.hotdesign.com/seybold/index.html -
For those who are still afraid of CSS
http://www.alistapart.com/articles/12lessonsCSSandstandards/ -
Some practical tips with examples for using CSS
http://www.alistapart.com/articles/practicalcss -
How to communicate the advantages of CSS above table based designs
http://www.alistapart.com/articles/csstalking/ -
Another area where tables often are abused are the layout of web forms. The following article describes an alternative:
http://www.alistapart.com/articles/prettyaccessibleforms/
