Tableless design and layouts

Why no tables for layout?

• A table forces a user to follow your document structure, not a typical document structure.
• Tables require much more HTML to generate than using the DIV method and so increase the file size of the page.
• Once a table is laid out and used across a website, possibly hundreds of pages, any structural updates or amendments are both time consuming and expensive.
• A table can be styled using CSS whereas a DIV can be floated and positioned to give you precise layout control.
• Nested tables and spacer gifs make for messy markup and inaccessible websites.
• Presentation information is mixed with markup so maintenance becomes harder.
• Tables may offer good browser compatibility but not device compatibility.

Never mind all that, how do I layout my website without tables?

A typical layout is the 2 column fixed width layout. You have a header, a navigation column, a content column and a footer.

Check out the following HTML below.

<table width="100%" border="0"
  cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <table border="0"
        cellpadding="0" cellspacing="0">
        <tr>
          <td colspan="2" align="left">
            <h1>This is a header</h1>
          </td>
        </tr>
        <tr>
          <td width="200" align="left">
            <p>This is the navigation</p>
          </td>
          <td width="550" align="left">
            <p>This is the content</p>
          </td>
        </tr>
        <tr>
          <td colspan="2" align="left">
            <p>This is a footer</p>
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

As tidy as it may seem, it is actually far more HTML than you need. As soon as the columns start to stretch with content you then have to worry about vertical alignment which, no doubt, can be solved with more attributes and nesting more tables within the containing table, in the process, adding more HTML to the file and increasing the size. I also centered the 750px wide layout using a containing table which could have been done with the deprecated <center> tag but we're not going there. Validated, remember!

Now look at an alternative.

<div id="main">
  <div id="header">
    <h1>This is a header</h1>
  </div>
  <div id="navigation">
    <p>This is the navigation</p>
  </div>
  <div id="content">
    <p>This is the content</p>
  </div>
  <div id="footer">
    <p>This is a footer</p>
  </div>
</div>

Ahh, much better. OK, on it's own it's useless. But that's all the markup you need to achieve the same layout results as the table based layout. Remember, a stylesheet gets cached. Table layout and markup needs loading on every page so the CSS layout may not score any performance points on the first load but after that it leaves the tables for dust.

Using CSS to replace the tables

This is where the fun begins. CSS is notoriously difficult to get right in every browser. Despite popular belief that following standards, avoiding quirks mode and that uniformity exists in standards capable browsers, there are differences. We'll focus on the tried and tested method of cross browser compatilibility. Design for Mozilla Firefox, check it out in Opera, then tweak the CSS for IE, both 6+ and 5.5 if possible.

Add the following CSS to the above HTML to add some formatting to our DIV layout.

/* set the containing div and centre it */
#main{
    width: 750px;
    /* include the IE5.x/Win box model hack */
    \width: 770px;
    w\idth: 750px;
    margin: 10px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
}
/* set the header div */
#header{
    padding: 5px;
    margin-bottom: 0px;
    background: #e2e2e2;
}
/* set the navigation div */
#navigation{
    float: left;
    width: 200px;
    /* include the IE5.x/Win box model hack */
    \width: 210px;
    w\idth: 200px;
    margin: 0px;
    margin-right: 0px;
    padding: 5px;
    background-color: #eee;
}
/* set the content div */
#content{
    padding: 5px;
    margin-left: 210px;
    background-color: #bbb;
}
/* set the footer div */
#footer{
    padding: 5px;
    margin-top: 0px;
    background-color: #e2e2e2;
    clear: both;
}

The above CSS code will give us the desired layout. Now it looks quite messy but remember that once loaded, it gets cached which means only the HTML gets loaded on subsequent page requests giving a huge performance advantage.

A lot of the above mess comes down to the IE5.x/Win box model hack being implemented. IE5.x/Win incorrectly calculates widths when borders and/or paddings are used and it leaves the content area smaller, so to get it to work in that browser you need to break the CSS. It's not pretty but it works. I'm not really in favour of supporting IE5.x/Win but I understand that many users are still cursed with this browser so the hack stays for now.

As soon as you float a DIV, you'll need to clear another adjacent to it, which will, well, clear it. This applies to the footer and not the content which, well, does float next to it which is what we want. If the footer isn't cleared, it directly follows the content and not the navigation leaving an overlap and destroying the layout. Backup your original copy and play around with the widths and positions to get the desired layout.

Not only has your XHTML now become lean, your document structure is now well defined and with styles removed, the document is still perfectly legible and formed. Usable and accessible.