Web Standards and Tableless Design | September 17, 2003

I belong to a number of web design related mailing lists and see quite a few people asking if they should start doing tableless design. I think it's great that more and more people are starting to design sites this way but feel that these is a bit of a misunderstanding about tableless design and web standards.

CSS based tableless design and web standards are actually 2 different things but are often chunked in together. It's perfectly possible and acceptable to create standards compliant sites that use tables for layout. The idea is to eventually faze out the use of tables for layout. However as long as browsers support tables and the standards say it's OK there is no real problem with using simple table based layouts.

However tabeless design is undoubtedly the future of the web so it makes sense for people to start working towards that goal and upskilling themselves. There have recently been a number of high profile tableless sites launched and this is only going to increase in frequency. So if you're new to CSS layout it really makes sense for to start exploring it as a possibility.

Using CSS for layout has some wonderful benefits like improved search engine friendliness, better site accessibility and potential bandwidth savings. It can ease site maintenance and potentially make site redesigns a simple process.

Good CSS based layout can be a complicated thing to achieve and requires a solid understanding of CSS and browser quirks. Some people fear that because of this complexity, you may have one CSS guru who does all the layout for a site, but unless everybody working on the site are also very knowledgeable in using CSS, tableless design would be unworkable.

Personally I believe that by separating the style from the content, it actually makes life easier for the developer. They no longer have to worry about breaking a sites design because they never have to go near it. No more having to add font tags all over the place and escape lots of tag attributes, or work out complicated routines just to echo out some info in a multi column table layout. So using CSS to control layout can greatly simplify the job of the programmer/developer.

Fundamentally the argument shouldn't be whether to use tableless design or not. The argument should be to adopt web standards, and design to a standard, not a browser version. Then, when it comes to designing the site, make a considered decision about the general design layout. If you think you can do it using CSS (i.e. it's a simple layout and you've got the in-house skills) then go for it. However it's just as valid to use tables to control the basic layout (doing your best to cut out complicated or overly nested tables) and use CSS to control everything else.

This is the way vendors such as Macromedia are moving. DWMX2004 now uses styles by default to control text appearance, page colours, margins etc. However they realise that table based layout will be hear to stay (for a while at least) so have updated their table editing mechanisms as well.

So if you're struggling about whether you should start designing sites using CSS layout instead of using tables, don't (struggle that is!). We're living in transitional times. By all means have a play with CSS based design, but don't cut yourself up if you have to use tables occasionally.

Posted at September 17, 2003 7:19 PM

Comments

Keith said on September 17, 2003 7:53 PM

Amen brother. My mantra has been and will continue to be: “Practice Practicality” when it comes to Web standards. If it makes sense and is within your skills to do something tableless — go for it. If not — that’s fine too.

Knowing your audience, understanding the standards (even if you don’t use them) and having clear goals are more important that impressing all the standards geeks with your 100% valid, tableless design. If you can do it, and it makes sense — that’s just a bonus.

Having said that, I do find (more and more) that separating my presentation layers with CSS and going tableless actually saves me lots of time now, and who knows how much down the road. But, again, it depends on the project.

JTG Mark said on September 18, 2003 12:42 AM

Double Amen! Even if I’ve to remember that table/tableless hasn’t to be a radical choice. Tables are still good for grids an similar… But we all know it by now.

Doc says: “depends on the project”. It’s absolutely true. On the project and on the time. I love develop projects designed with web standard, but, often, I’ve to work in a not skilled team.

If web standards are not a “standard” yet you can’t use them. Time’s always short. And Dreamweaver “apparently shorter way” is round the corner.

Lucas Thompson said on September 18, 2003 8:08 AM

Third Amen! Motion Passed! Great post.

A third category often lumped in with these two is “accessibility”. While I often use accessibility concerns to sell the standards and CSS layouts to the suits but it’ll be a while before the graphics-heavy movie and video game preview sites (for example) start doing it this way.

PS. Andy, you have a typo in your individual archive template: it’s ‘div’, not ‘sdiv’ :-)

Guy said on September 18, 2003 11:29 AM

Fourth Amen

Although accessibility and web standards are a great thing to strive for, they’re not the main reason I switched to CSS from table layouts. The main reason was that it would take me less time as a developer to build a site and then make changes to the design depending on the client’s wishes. So, I’d gather all their content and mark it up in a nice easy way that wasn’t bloated by tables etc. The client would then want to change the design and I’d be able to do it in a fraction of the time that i used to.

The fact that the site would also conform to web standards and accessibility guidelines was an added bonus.

Standards based design without layout tables just makes a load of sense.

Bruce said on November 15, 2003 8:55 PM

People (clients) still ask for Netscape4.x browsers. What should we do?

Yes, making changes to the design depending on the client’s wishes is easier if you use tableless design.