TableLess CSS Design
Every now and then I discover that I really don't understand some technologies as well as I think I do. I had recently been contacted by Dan Williams via email regarding some suggestions that he had about improving my websites. He had suggested a concept that I had heard about, "TableLess Design", but never really saw in action. The concept really goes against what many of us have done for years, using Tables for the layout of our web pages. Recently, I presented a session on creating websites that conform to the Section 508 and Web Accessibility Initiative Guidelines for users with disabilities. You would be surprised at how many of the guidelines recommended using TableLess Design rather than using tables to format documents. That peaked my interest, but I just did not understand how to actually do this. A common layout might be one table with 3 rows and 2 columns, in which we place the header, footer, left panel and main content sections. After chatting with Dan for some time, he disappeared and then returned about 30 minutes later with a rough prototype of TableLess design for a page that I needed tables to layout. He accomplished the exact same effect with nothing more that just CSS. I must say that I was really amazed at how he did it. Look Ma, no tables! The only downside to this approach is that it doesn't play well with really old browsers ( <NS6, <IE5.5). To demonstrate how it would look in an older browser, he showed me a version with the CSS removed and, although it didn't look as great as before, it was still readable. Depending on what you are building, you can make the decision. If you are developing an Intranet Application, this seems like a no-brainer to me.
Now that I have a new approach to creating web page layout, I can hardly wait to implement it. Dan has volunteered for a position in my NonProfitWays project and will be replacing the crappy CSS implementation that yours truly has implemented and will be replacing it with a CSS file that is designed for a TableLess layout. He will be sending me some other links that demonstrate TableLess design over the next day or two, but for now the one site that I would like to share is CSS Zen Garden This site demonstrates some of the most beautiful layouts I have seen and all of them are implemented via CSS only. Essentially, the exact same page is displayed using different layouts implemented via CSS. The HTML never changes. Sweet!!!