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?”
A second disadvantage is replicating some of the properties of tables-based layouts with CSS. A common problem is that multi-column CSS layouts often display unequal column lengths (particularly evident with diferent coloured columns). Once again, there are several different solutions. For example using background images, negative margins or JavaScript to get round the problem. They can work very well but implementation and testing can take some time.
Finally, most clients do not appreciate the niceties of CSS. What they want is a website that works for their business. That’s it.
The solution…
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.
Related articles | 456 Berea Street | Andy Budd
Comments
20 Mar 2005 15:32:38
I was trawling the net and came across this post, the first I’ve seen that advocates using tables for layouts and I have a few comments to make.
A web document should be structured top-down and when using tables this model is broken. A user agent is forced to interpret the page according to the structure of the table, and this can vary wildly so can be terribly inaccessible, not just for screen readers but also text browsers, handhelds and many other devices.
A ‘tables-lite’ solution will give a website layout rigidity but it can be done using CSS without hacks, even in Netscape 4, but simplicity is the key. The culprit in most cases is paddings when in conjuction with borders/margins. Leave the padding out and the hacks are hardly needed. It’s just a case of using another way to achieving the same look, which I’ll admit, on occasions requires nested DIVs to get right, but they don’t pose anywhere near the same problems as nested tables do.
I have to agree with you about vertical alignment and column stretching as a headache and it’s a question I get asked a lot to solve on many CSS forums about but the solution needn’t be that complicated or tricky to implement, especially with Alistaparts faux columns solution and clever use of the line-height property for vertical text alignment.
My gripe with using tables for layout is that it means the website is designed for monitors and not much else. Pure CSS allows us to include the media rule for effortlessly formatted printing, handheld viewing etc and surely is the only way.
I’ve even heard rumours that IE7 will not be supporting all features of CSS2 as it feels there are flaws so MS will be using the existing rendering engine and concentrating on security instead. This will only slow things down and if there are no single set of standards then I would agree with you.
Also, what does BobbyAAA have to say about using tables for layout? ;)
22 Mar 2005 08:46:38
Yes, agree with most of your points – but I am advocating an approach that works better for us at the moment. I am sure that we will be increasing the number of purely CSS-based layouts over time and moving slowly away from the ‘tables-lite’ approach.
It would be great if IE7 has a similar level of support for CSS as Firefox, for example. Greater consistency amongst browsers would be an advantage!
Know the Faux Columns approach. However, we found that the negative margins method worked better in one particular example where we compared both methods.
On your point about tables only being useful for monitors, yes, pure CSS is more adaptable. However, small business clients of ours consider (rightly or wrongly) that monitors is their main market.
Bobby follows WAI guidelines as far as I know (which would advocate that tables should not be used purely for layout).
Comments are OFF for this post.