6 Reasons To Ditch Your Table Based Layout

Friday, February 1st, 2008

Categories: Web Development

RSS Comment Feed

Trackback

AddThis Social Bookmark Button

UPDATE. I wrote a new article playing devil’s advocate here.

As table-based layouts are slowly being phased out by CSS elements, there are a few that cling to the concept that a website should be laid out in a table. As someone who’s made the switch a long time ago and now uses tables rarely (a majority of those cases are to display actual tables), I can say that I can’t go back to the old layouts. In this article, I’ll talk about why I learned to stop tabling and love the CSS.

CSS File Caching Eases Load Time

Since style information is stored in a separate stylesheet for your layout, the browser doesn’t have to constantly load <tr> and <td> tags for every page it visits. It’ll simply cache the stylesheet information and not continuously reload it after every page visit. One could argue that a stylesheet is an extra server call, but if you don’t have a stylesheet to begin with, there may be other issues. :/

Less Code and Less Coding

I have noticed that there has been a reduction in coding since I’ve switched to CSS based layouts. Repetitive <td> tags start to add up. When you’re setting widths, heights, valign, align continuously, it takes space and time.

Do Site-Wide Changes In a Pinch

Because you’re using CSS, all your style information is stored in a single file. That makes it incredibly easy to perform site-wide changes. You can argue that Dreamweaver templates are equally easy to perform side-width changes, and you could be right, but imagine combining Dreamweaver templates AND a CSS layout?

Greater Flexibility

Because your layout all goes back to CSS elements placed on your page, CSS gives you the flexibility to easily code elements to appear/disappear, be resized, tweak minor details like extra padding on one side, certain font attributes in another, etc.

More Professional

Regardless if you prefer tables, table based layouts are passé. If potential employers are like me and analyze websites of people that seem interesting, it’s better to drop your table based layout. CSS layouts are more modern and professional. Knowing CSS is definitely a skill that should be dropped in job interviews.

More Usable

I imagine that tables nestled inside tables nestled inside tables start to become a nuisance for screen readers. Div tags are likely recognized instantly as layout elements, and table tags as tables of data. Make it easy on your users with screen-readers, use the right tags to layout your website.

Hope that helps. Now go make a CSS based layout. :)

Bookmark this blog using any bookmark manager!
Subscribe to Pat-Burt.com via RSS

Error. Page cannot be displayed. Please contact your service provider for more details. (7)



Related Posts


Subscribe to this Post

4 Responses to “6 Reasons To Ditch Your Table Based Layout”

  1. Kevinor Says:

    I do not argue with any of the points that you have written. However, there is one spot where I feel tables are still the preferred solution for a layout. Columns. At least until CSS 3.

    If you need columns of equal height regardless of which column has more content in it, putting a table in is still FAR simpler than the javascript solutions out there.

  2. Patrick Burt Says:

    Hey Kevin, thanks for the comment. I do agree that columns are easier with tables. However, the work I put into developing a CSS solution is worth it when it comes to updates or tweaks later on. You also have access to a broader range of tools.

    If you’re referring to a fluid layout, those aren’t something I recommend, but there’s no better solution then tables to lay that one out. :)

  3. Raj Says:

    “CSS File Caching Eases Load Time”

    …except when you’ve loaded so many CSS files that the initial load time is almost as bad as a table-based layout. But hey, yeah, at least there’s caching once you’ve gotten past the front door.

    “Less Code and Less Coding”

    td’s are repetitive? Not with a tool like Dreamweaver. An extra table or column/row is just a click or two away.

    “Do Site-Wide Changes In a Pinch”

    Imagine DW templates and CSS together? I agree. leave CSS for the text and object styling, leave table layouts to the page structure and the templates. I win.

    “Greater Flexibility”

    I can do just about everything you mentioned, except visibility, with tables instead of CSS.

    “More Professional”

    I will say this once and once only: “the only people you impress with your CSS-only layout is other web devs.” CLIENTS DON’T CARE. MOST VISITORS DON’T CARE. Period.

    “More Usable”

    The one incontrovertible truth. Screen readers blow at reading tables correctly (unless it really is tabular data).

    P.S. that table I just made in Dreamweaver? It’s going to look/lay out EXACTLY THE SAME in almost every stinkin’ browser. Game. Set. Match.

  4. Patrick Burt Says:

    Hi Raj, thanks for the comment.

    “…except when you’ve loaded so many CSS files that the initial load time is almost as bad as a table-based layout. But hey, yeah, at least there’s caching once you’ve gotten past the front door.”

    This is often the result of poor coding. Since there is no drawback to the (with the exception of file bloat) to leaving old deprecated CSS code, it sometimes ends up in the mix.

    Although, in my experience, two identical designs will have relatively the same amount of code. What I mean by that, is if the layout requires 12 css files, i can’t imagine the table based layout being as simple as a site requiring 1 css file.

    “td’s are repetitive? Not with a tool like Dreamweaver. An extra table or column/row is just a click or two away.”
    align, colspan, nbsp, spacer.gif, rowspan, height, width, valign. x number of cells
    VS
    doing that once, and applying classes using css.

    “Imagine DW templates and CSS together? I agree. leave CSS for the text and object styling, leave table layouts to the page structure and the templates. I win.”

    I did mention DW templates and CSS “Layout” ;)

    “Greater Flexibility”
    But can you change them as easily? Changing the width on a fixed width of a cell is a pain. Moving layout object was a much bigger pain when i was using tables.

    “More Professional”
    employers, contractors, directors.

    “P.S. that table I just made in Dreamweaver? It’s going to look/lay out EXACTLY THE SAME in almost every stinkin’ browser. Game. Set. Match.”
    When I was in college, many MAC students were docked marks because their table based layouts went to crap in Internet Explorer, all they had to test was safari and firefox. The problems are not unique to one type of layout. :)