Skip to content

A podcast for those who design, develop and run websites.

Boagworld is the blog of web strategist Paul Boag who lives in the heart of rural Dorset (hence the cows). He produces a weekly podcast with UX consultant Marcus Lillington on building and running websites. They also run the web design agency Headscape.

Latest Shows

216. Thanks for all the fish
This week on Boagworld: Chris Coyier talks CSS and more, we say goodbye to the boagworld podcast and ask what can you listen to now?
215. Web Directions
This week on Boagworld: Emerging trends at Web Direction @Media, playful web design and death to design by committee.
214. When to hire a web designer
This week on Boagworld: When to hire a web agency, user testing on disposable websites and a need for speed.
213. Getting all emotional
This week on Boagworld: Stephen Anderson on emotional design, I review the iPad and we talk fonts, flash and fotos.
212. More skills to learn
This week on Boagworld: 5 new skills every web designer needs to know and how to be inspired while maintaining focus.

or view all shows

Have your say

Become a part of the Boagworld community...

Paying the price of tables

Posted in Tech/Development on: Thursday, May 18, 2006 by Paul Boag

Barely a week goes by that I fail to rant about why we should banish table based design and yet here I sit struggling because I failed to heed my own advice.

I am working on an old website that I built a couple of years ago and I am having a hell of a time with it, all because of my own laziness.

I would like to tell you that I built this site before I knew about web standards and the concept of separating from . I would like to blame the presence of a table to set the basic layout as a mistake born out of ignorance. I would like to tell you that… but I can’t.

I introduced one tiny little table. So small you could argue it hardly counted.

When I built this site I knew exactly what I was doing. We had been working with standards for well over a year and I had a fairly good handle on what I was doing. However for one reason or another I cut a corner. I introduced one tiny little table. So small you could argue it hardly counted. All this table did was set the basic two column layout. I argued that the time saved from taking this approach out weighed any "purist" arguments I might have against it. And indeed it did make life a lot easier and we turned the project around remarkably quickly considering its size.

Of course, like all good shortcuts it eventually came back to bite me. Recently the client requested a low vision version of the site like the one we offer on our company website. The problem is that one of the basic principles of low vision design is that is sorted into a single column to aid by those with poor eyesight. Suddenly that little insignificant table has become a real pain.

The morale of the story is two fold, dump those table based designs and don’t cut corners for a quick win.

Post to Twitter Post to Delicious

What did you think about this post?

11 Comments

Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email

  • Adam says:

    Hind sight is 20/20….
    or
    Website is 20/20?

  • Ross says:

    There is a huge debate about tables on sitepoint right now, plenty of people simply don’t care about the pitfals of tables and claim the benifits of CSS are miniscule.
    In an industry with so many designers, I figured people would seak out any edge they could. Odd that so many people still rely on tables.

  • shatterglass says:

    See… Tables are like your ex-wife. You loved them once and didn’t think you could live without them. And even though you’ve now moved on to something better, you still have to pay alimony and will never be enitrely free of them.

  • Colin says:

    I came onto the web standards scene a little too late, and I have a lot of table-based layouts I’m having to maintain weekly.
    Many times, I just want to do myself a favor and recode entire sites for my own peace of mind (but I can’t do that kind of work for free.)

  • Ed says:

    Could you use a bit of DOM Scripting to remove the table?

  • Paul Boag says:

    That is exactly what I have done ed but its not ideal for those without javascript enabled.

  • Ed says:

    True, but at least it is a start!
    Maybe there is some server side processing you could do to strip the table out before it even gets to the browser.
    Id could all end up being a bit slow though. Is it time to redesign the site?

  • Andrew says:

    What about a bit of text replacement? I’ve always found Dreamweaver’s text tools good for a mass update across a site.
    Replace first table cell with a , replace the second one, then the replace the tag with a container and style up your CSS accordingly.
    (working on a copy first of course!)
    I’ve made it sound so simple but I’m sure you’ll say it’s not.

  • Paul Boag says:

    Unfortunately Andrew, text replacement isnt the answer. The low vision version of the site uses exactly the same HTML as the main version. All you do is swap the stylesheet. If I removed the table from the HTML it would break the main stylesheet.

  • This problem has bitten me several times (including my personal sites). Now that I am completely table free, I have seriously considered updating all my previous clients with a tableless design at a super discounted rate. Has anyone done that, is it necessary, or am I just to much a ‘purist’ now?

  • Marcus says:

    Tables are great
    It seems like tables are faster and more consistant between different browsers then absolute positioning. I see nothing wrong it may not be considered proper and may not be its true purpose [as the thing holding the layout together] but it works better then the proper way.

Leave a comment

Additional Information

Produced by Headscape

Boagworld is produced by the web design agency Headscape founded by Marcus, Paul and Chris Scott. Headscape also has a number of other talented guys who blog. Check them out.

  • Craig Rowe is one of our amazing developers and writes some superb posts on everything from .net to AIR apps.

  • Ed Merritt is a Headscape designer who's blog contains examples of his work and a number of free Wordpress themes.

  • Dave McDermid is a Headscape developer who has an excellent blog. He blogs on everything from AJAX to security.

  • Rob Borley is one of our project managers and blogs regularly on client and project management issues.

  • Leigh Howells is our multimedia design guru (whatever one of those is). He blogs on a mixture of design and music.

You can now download my video presentation of 40 better ways to work with clients for only £9.25.