Tables or CSS for web page layout?
I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.
A growing number of web designers now use CSS for web page layout. That’s great and it means that the websites are normally efficient in terms of their code, are semantically correct and have good accessibility. In addition, the usual style sheet advantages apply and design changes can be made across the whole website by editing one file.
What’s the problem?
We have often asked ourselves the same question at the start of any project. Should we use a pure CSS-based layout (eg CVW Web Templates) or should we stay with the tried-and-tested tables-based approach? Exponents of the CSS approach would clearly say that CSS is the way to go. For accessibility reasons, tables should not be used for layout. In practical terms, it is not as easy as that.
For one thing, it seems that cross-browser consistency is only obtained with some CSS layouts by using various CSS code hacks (often to get round problems with Internet Explorer). This seems to obviate one of the advantages of CSS which is quick and easy updating. We’d rather not use hacks because it makes life more difficult down the line when a client says “can you just move this part of the page?”
Finally, most clients do not appreciate the niceties of CSS. What they want is a website that works for their business. That’s it.
So, what’s our answer? Well, in most cases (for non-database websites) we favour what we call a ‘tables-lite’ approach (eg Dale Consulting). Use a simple, validated, tables-based layout for the main page areas. In other words, a single table with the minimum number of cells. Perhaps three rows and two columns which allows for a main content area split into two with a header and footer. No nested tables are used. We then make as much use of CSS as we can to design and move paragraphs or divs within this ‘outer’ framework.
We find that this approach combines good practicality with newer standards.