Use CSS instead of HTML tables for page layout

Well I’m not the first to say this, but when I look around I notice that a lot of people still use HTML tables for their page layout. I develop a lot of web applications and each time I’ve to advocate the same thing over and over to the people I’m working with. Don’t use tables for page layout!

Tables might have been “the way” of doing things in the early days. But we have to move on! These days there are much better ways of laying out our content on a webpage. Let those tables go and step into the world of CSS.

I’ve gathered some links to prove my point on why and how you should be using CSS for more than just a few nice fonts and colors.

• First off all read Why tables for layout is stupid. This is a nice and funny way of telling what I’m trying to say.
  
• When it comes to prove that it’s much more efficient to use CSS instead of tables have a look at this article on www.stopdesign.com: Throwing Tables Out the Window. In this article the author takes a page from the Microsoft website and redesigns it without tables, saving 62% in file size. With the heavy traffic Microsoft gets, the author claims they could save 329 terabytes per year by not using tables…
  
• For some more examples of other sites that could easily do without tables have a peek at www.tableless.com.br/en/.
  
• A very well known and often used example of the flexibility of CSS is the www.csszengarden.com. People always are impressed by this site when I point it out to them.
  
• Another site I would like to point out is www.alistapart.com. It contains a section of CSS articles that describe how to accomplish the most amazing things like the well known suckerfish dropdowns that describe how to take an unordered list and make it into a dropdown menu with CSS and just a pinch of JavaScript.
  
• A good starting point for those who I have inspired to get the most out of their page designs is the following article from a list apart: Practical CSS Layout Tips, Tricks, & Techniques.