Tables: The Next Evolution in CSS Layout

Today, a talented web designer must be a modern-day MacGyver—that 80s TV action hero who could turn a rubber band and three tin cans into a serviceable aircraft. Turning the average site design mockup into a living, breathing slice of HTML and CSS is a comparably delicate miracle, which must be accomplished using whatever makeshift tools happen to be lying around in current browsers.

That’s exactly why so many professional designers still choose to use HTML tables for layout. How can we expect beginners to adopt CSS for layout when it takes someone with the resourcefulness (and snappy dress sense) of MacGyver to fully understand the techniques involved?

Thanks to the imminent release of Internet Explorer 8, CSS layout is about to become something anyone can learn to do—no chewing gum or makeshift explosives required.

HTML Tables Are a 90% Solution

HTML tables produce the grid-based layouts we want to achieve with relative ease, but the price is that users with screen readers and other technologies that rely on semantic markup have a hard time making sense of the page.

As standards-conscious designers, we have convinced ourselves that the benefits of semantically meaningful markup are worth the added hassle of using CSS for layout. Not everyone shares this conviction. Whenever I write about some new CSS layout technique, at least half the feedback I get boils down to “You’re kidding yourself if you think designers will use that instead of HTML tables.”

The reason this is such a contentious issue is that tables correspond so well to the way designers tend to think of pages: a semi-flexible grid that defines rectangular areas that make up the page. If you want three columns in a row, you just put three table cell tags inside a table row tag:

<table> <tbody> <tr> <td>column 1</td> <td>column 2</td> <td>column 3</td> </tr> </tbody>
</table>

The premise of using CSS for layout is sound: replace the HTML tables with semantically meaningful markup, plus semantically invisible div’s where needed:

<div id="container"> <div> <div id="menu">column 1</div> <div id="content">column 2</div> <div id="sidebar">column 3</div> </div>
</div>

The problem is the CSS code required to lay out this new markup. CSS was not initially designed to support blocks arranged horizontally across the page; consequently, we have had to get creative with the tools at our disposal. Current best practice requires the designer to master subtle interactions like overlapping floats, negative margins, and other black magic to achieve a simple multi-column layout. You don’t so much describe the layout you want as gradually build up a combination of positioning constraints that almost miraculously result in the layout you’re after. You couldn’t come up with a more convoluted way of expressing page layout if you tried!

If CSS layout code were as easy to write as HTML tables, making the leap would be a no-brainer; designers would flock to CSS willingly. Instead, we must drag them kicking and screaming, because the tools that CSS provides are not suited to the layout tasks we want to accomplish.

What if CSS provided a set of tools that applied to practical layout tasks as obviously as HTML tables do?

Bring the Tables to CSS

CSS actually includes a feature that works just like HTML tables: CSS tables. Using the CSS display property, you can instruct the browser to format any HTML element as if it were a table. For visual display purposes the element behaves like a table, but the element retains its non-table semantics for screen readers and other tools that look at the HTML markup.

In short, CSS tables let you perform table-based layout without misusing HTML tables!

The CSS to lay out our collection of div’s above as a row of three table cells is very straightforward:
#container { display: table; border-collapse: collapse; table-layout: fixed;
}
#container > div { display: table-row;
}
#container > div > div { display: table-cell;
}

We can then set the widths of each of our columns, again with very straightforward code:

#menu { width: 200px;
}
#content { width: 66%;
}
#sidebar { width: 33%;
}

From this foundation, applying borders and backgrounds to these columns is trivial. Check out this sample page, and the screenshot below for a fully-rendered example. Now this is the kind of page layout code that designers can embrace with confidence!

a simple page design featuring a three-column layout

Compared with HTML tables, CSS tables have only one notable weakness: CSS does not allow for table cells to span rows or columns the way they can in HTML tables (with the “rowspan” and “colspan” attributes). As it turns out, however, this is a relatively uncommon requirement for page layouts; and in the few cases where spans are required, there are ways to fake them with CSS tables.

Can You Start Now?

So, why isn’t everyone already using CSS tables for page layout? In an all-too-familiar twist, we have Internet Explorer to blame. CSS tables are supported in every major browser except Internet Explorer. However, the good news is that Internet Explorer 8 will have full support for CSS tables upon its release, setting the stage for CSS tables to become the preferred tool for page layout on the web!

The question you must ask yourself is, “When can I start making the switch?” The answer may depend on the type of site you work on.

If you work professionally on a mainstream website, chances are you will be expected to keep your site working on Internet Explorer 6 and 7 for some time to come. Since neither of these browsers support CSS tables, it may seem on the surface that you’re out of luck. In fact, CSS tables may still make your job easier.

Because CSS tables are so much easier to work with than previous CSS layout techniques, you may find it worthwhile to implement your design first using CSS tables, and then using older CSS techniques for IE6 and IE7. You can use conditional comments to insert your IE6/IE7 style sheet, while all other browsers will only get the table-based layout. This approach does mean you have to implement your layout twice, but it saves you the considerable headache of getting the older techniques from working both in Internet Explorer and in other browsers.

While you’re at it, you may find opportunities to simplify the layout slightly in the IE6/IE7 version of the site, and save yourself a lot of work. Something like not insisting that a column’s background color extend all the way to the bottom of the page can radically simplify the code, for example.

If you work on a site with a more technical audience, or owned by a more progressively-minded organization, you might have even more wiggle room. In this case, you should explore the possibility of providing a simplified page layout for IE6 and IE7.

A simplified, two-column layout is visible in the IE6 window.

If you find yourself having to defend this approach to a client, tell them how much of your time (and their money) will be saved by simplifying the layout a little in outdated browsers.

Even if you can’t justify working with CSS tables in your day job just yet, it’s worth finding excuses to use them where you can. When Internet Explorer 5.5 made CSS layout across browsers possible for the first time, Jeffrey Zeldman wrote To Hell With Bad Browsers, leading the call for designers to adopt CSS layout:

“For years, the goal of a Web that was accessible to all looked more like an opium dream than reality. Then, in the year 2000, Microsoft, Netscape, and Opera began delivering the goods. At last we can repay their efforts by using these standards in our sites. We encourage others to do the same.”

The response to this call to action was gradual, but effective. Initially, web designers began experimenting with CSS layout on their personal sites, before testing the waters with some of their riskier side projects. Major mainstream sites like ESPN began making the switch only a couple of years later.

With Internet Explorer 8 on the verge of release, the stage is set for another wave of change to sweep the Web, however gradually. Now is the time to ensure you’re on the leading edge, not paddling to catch up!

Everything You Know About CSS Is Wrong

Perhaps the most important benefit of CSS tables is that it finally makes page layout with CSS easy to learn. Finally, we can justifiably expect anyone designing a web site today to do it the right way, with a proper separation of content (HTML) and presentation (CSS).

In my just-released book, Everything You Know About CSS Is Wrong (available from Amazon: Everything You Know About CSS is Wrong!), Rachel Andrew of The Web Standards Project and I explore the realities of page layout with CSS tables, the new possibilities they open up, and how to work around limitations like the lack of row and column spans. A brisk read, it provides a valuable glimpse into the next evolution in CSS layout on the web.

Comments

26 comments on “Tables: The Next Evolution in CSS Layout

  1. Fantastic article… right after reading I ad to build a prototype of my own. One question that has always plagued me though…. why is it necessary to add the border to the header and footer in order for it to expand around it's content and not just the text itself?I've ran into this before, but have never known the technical explanation. Any ideas?

  2. Fantastic article… right after reading I ad to build a prototype of my own. One question that has always plagued me though…. why is it necessary to add the border to the header and footer in order for it to expand around it's content and not just the text itself?

    I've ran into this before, but have never known the technical explanation. Any ideas?

  3. One question on the sample. What's the purpose of the “skipto” container?I like the idea that CSS can do layout. Although personally, I'd like to separate “style” from “structure”, as if the frame is not part of the painting.

  4. One question on the sample. What's the purpose of the “skipto” container?

    I like the idea that CSS can do layout. Although personally, I'd like to separate “style” from “structure”, as if the frame is not part of the painting.

  5. It's a nice idea but look at the hack you had to put in just for IE7. I can only imagine that IE6/5 aren't too happy about it (sorry i'm on a mac- no IE). But basically you've had to write two sets of CSS which i know designers aren't going to be able to get their head round – i'm a designer btw so i can say that ;-)

  6. It's a nice idea but look at the hack you had to put in just for IE7. I can only imagine that IE6/5 aren't too happy about it (sorry i'm on a mac- no IE).

    But basically you've had to write two sets of CSS which i know designers aren't going to be able to get their head round – i'm a designer btw so i can say that ;-)

  7. As a web designer, this is something that irks me every time I have to do it. I have a beautiful CSS layout, then the client wants this here and that there instead. I've learnt long ago not to try and argue with them, instead, I just sigh, and do what I need to do in an HTML layout. Never ceases to hurt me inside every time I need to do it though.Thank you for showing me there is an end to my pain in sight!

  8. As a web designer, this is something that irks me every time I have to do it. I have a beautiful CSS layout, then the client wants this here and that there instead. I've learnt long ago not to try and argue with them, instead, I just sigh, and do what I need to do in an HTML layout. Never ceases to hurt me inside every time I need to do it though.

    Thank you for showing me there is an end to my pain in sight!

  9. Strong time. , latina anal movies, brazilian ass fucked, celeb free nude photos, busty asian milfs, sexy gay boys, small asian tits, sexy anime games, public fuck vids, free lesbian video download,

  10. This is a great solution to using CSS to define tables for layout leaving HTML tables to be for data alone, however I have a slight issue with it in FireFox.

    [code]
    HTML:

    Column 1 content

    Column 2 content

    [/code]

    CSS:
    [code]
    .table {display:table; width:100%;}
    .table .tablerow {display:table-row; width:100%;}
    .table .tablerow .tablecell {display:table-cell;}
    .layout2cr .column1 .columninner {padding:20px;}
    .layout2cr .column2 {width:15em; border-left:1px solid #CCD0A6; background-color:#E0EFBE; -moz-border-radius:0 6px 6px 0;}
    .layout2cr .column2 .columninner {padding:10px;}
    [/code]

    My problem is that .column2 .columninner is taking on board the padding-top value of .column1 .columninner.

    No matter if I use margin or padding it takes the biggest value from either column and applies it to just the top of both columns.

    Any ideas?

    Paul.

  11. For anyone having top-alignment issues with this you need to specify vertical-align:top; for your divs defined as display:table-cell;

    Simples,

    Paul.

  12. I have put together a proposal and sample Chrome implementation of a CSS layout extension described at http://blogs.eforceglobal.com/dkarisch/archive/2009/07/16/536.aspx.

    With this generalized CSS layout solution HTML-like tables that include cell spanning can be achieved that require no special nonsemantic HTML mark-up… http://blogs.eforceglobal.com/dkarisch/archive/2010/03/15/544.aspx

    you can download the proof of concept from http://downloads.eforceglobal.com/CSS/CSSScriptLayoutR21525.zip and check out the examples. The performance is better than you would imagine, Microsoft’s CSS Expressions notwithstanding. The executable should work on any windows XP box.

  13. Pingback: rgewgerwgdsfgdefs

  14. Pingback: rgewgerwgdsfgdefs