Table-Based Layout Is The Next Big Thing

The recently-launched SitePoint CSS Reference (and its print version, The Ultimate CSS Reference) contains extensive coverage of some of the more obscure areas of CSS. One such area that is going to become very important with the release of IE8 later this year is CSS tables.

For years now, enlightened designers who have embraced CSS layout have had to bend over backwards to produce complex designs that would have been trivial to produce using the HTML table-based layout techniques of the past.

The lengths to which designers must go to produce, say, a simple three-column layout using CSS techniques are so extreme that many web designers simply give up on CSS and resort to HTML tables for their layout. The Tech Times #142 and #143 were devoted to this issue.

With the release of IE8 coming this year, the stage is set for all that to change. IE8 will be the last of the major browsers to add support for CSS tables, which will enable designers to use table-based layout techniques without misusing HTML table markup.

To demonstrate this, I’ve produced the following 3-column page layout example using CSS tables:

View the example in your browser

This layout is hardly unique; what makes it special is how easily it has been achieved. Rather than using absolute positioning or fragile and counterintuitive floating techniques, I’ve produced it using relatively easy-to-understand CSS tables.

Each of the three columns in the layout is a <div> with a unique ID. From left to right they are "navigation", "content", and "sidebar". All three are contained within another <div> with ID "body".

The magic comes in using CSS to make these three unremarkable <div>s display as if they were cells in a table row. First, we set the containing <div> to display as a table:

#body {
  border-collapse: collapse;
  display: table;
  table-layout: fixed;
}

And then we set each of our three <div>s to display as a table cell, with the width we’re after:

#navigation, #content, #sidebar {
  display: table-cell;
}
#navigation {
  width: 200px;
}
#content {
  width: 66%;
}
#sidebar {
  width: 33%;
}

With the addition of a few borders and background colors, as well as a little padding to give it that final polish, we’ve got ourselves a perfectly usable layout.

A longstanding bug in Firefox makes it necessary to add a second containing <div> inside the "body" <div> and set it to display: table-row. Otherwise, the layout will often break when it initially loads.

Not only is this code exceedingly simple, but the result is also far more robust than your typical three-column layout achieved with earlier CSS layout techniques. Each column extends the full height of the page no matter which column has the most content, and the layout doesn’t fall apart at extreme font or window sizes. The layout just works—in the same way that HTML table-based layouts have always just worked.

As soon as IE8 is out and we can begin to justify leaving IE7 behind, we can start to use these simple and powerful techniques, since all other major browsers already support CSS tables. Suddenly, CSS-based page layout will be something almost anyone can understand!

Of course, we can’t just throw away current CSS layout techniques the day IE8 is released, can we? After all, IE7 and its predecessors will be around for years to come. If you want your site to look as good in those browsers, you’ll still have to break out the more complex and fragile layout techniques that work with them.

But if you can justify letting the experience slip just a little for users of IE7 and earlier, you may be able to minimize the amount of twisty CSS you need in your site. If you view the above example in IE7, for instance, you’ll see a simplified, two-column version of the layout that avoids the need to mix pixel-width columns with percentage-width columns, thus simplifying the code required to make the layout work in IE7 and earlier.

CSS tables will finally make page layout with CSS every bit as easy as the HTML table layout techniques of yesteryear. Barring support for older browsers, there will no longer be any excuse for designers choosing to abuse table markup for quick and easy layout work. And as shown in the above example, with a little extra planning, you should even be able to give a reasonable experience to users of older browsers while taking advantage of CSS tables in your layout.