Tables for layout?

Recently, both Andy Budd and Dave Shea have written about how they consider using tables for layout acceptable in some cases. While I understand what they mean by this, I’m concerned that some people may use it as an excuse for not even trying to learn how to layout a document with CSS.

Some say that CSS is too hard. Well, everything is hard until you know how it works. Let’s see, I’ll open up that wicked k00l pixel-perfect site i built back in -97 and see if I can understand it today. If I find my way through all the frames and down four or five levels of nested tables with colspan here and rowspan there, font tags and spacer gifs all over the place but no semantic or structural markup whatsoever, I may actually find a little bit of actual content in there somewhere. How is that any easier than using CSS to layout and style clean, structural and semantic markup? The only reason some may find it easier is because that’s what they are used to. Try putting someone who has never used tables for layout in front of a 20th century piece of “HTML” and ask them if it looks “easy”.

Besides, who says building web sites is easy? Sure, just about anyone can whip up something, as long as they can use a WYSIWYG editor. But building a usable, fully accessible, attractive, quick loading web site that meets client and user expectations and is liked by search engines is hard. Even if you use tables for layout. There’s no way around that.

Yes, I know neither Andy nor Dave are suggesting we go back to coding tag soup. But there is a risk that some people may interpret it that way, and continue using tables for all layout, since that’s what they are most comfortable with. You know, the path of least resistance.

Anyway, I don’t want to sound like a CSS zealot here, so I’ll offer a piece of advice: If you want to keep using tables for layout because doing so makes your life easier, go ahead. But please use as few tables as possible, don’t nest tables, make sure your tables make sense when they are linearized, validate your code (which, among other things, means you need to remove all those height attributes from your table elements), use semantic markup inside your table cells, and keep learning.

• May 16, 2004
• Comments closed
• Posted in CSS Web Standards

• Previous post: Clearing floats without a clearer
• Next post: How to size text using ems

Information, sponsorship, and externals

Best of 456 Berea Street

Equal height boxes with CSS (view demo) and Equal height boxes with CSS, part II (view demo)

It’s easy to create equal height columns with CSS. It just doesn’t work in IE.

Styling form controls and Styling even more form controls

Trying to make form controls appear identical across browsers and platforms is futile.

The danger of a better Internet Explorer

Will the improved web standards support in Internet Explorer 7 put the future health of the web at risk?

Accessibility and usability for interactive television

Accessibility and usability differences and similarities between for ITV and the Web.

CSS Validator colour warnings are not errors

Messages about missing colours or background-colours are not errors and can often safely be ignored.

More popular articles

Random places to go

• Box of chocolates
• molly.com
• Veerle’s blog
• snook.ca
• Standards-schmandards
• Bruce Lawson's personal site
• Design View / Andy Rutledge
• Adactio: Journal
• Accessify
• meyerweb.com