• Home
• About

The Real Deal Behind Table-less Layouts.

Tables, as a part of HTML, have gotten a bum deal over the last few years. Yeah, they were the darling of web design for a long time. Strutting their stuff with the latest and greatest cutting edge sites. Going to all the fancy website parties like Amazon and CNN. She even made it to the White House. Life was beautiful. Granted, she was never made to do those fancy layout tricks the designers in the know made her do. She was, however, a real trooper and did what we asked.

Now she’s the down-and-out kid. The designers who embraced her in her youth are now turning their collective noses and embracing DIV and SPAN, leaving her out in some cheap motel with a 2 dollar bottle of whiskey, half a pack of cigarettes and distant memories. “I was supposed to hold columnar data,” she keeps muttering to herself.

Ok, here’s the reality. Tables are good, they work and they are useful for good and proper representation of data. Tables are important and deep down are good natured and you can trust her with your little puppy. Over the years, designers abused tables for many reasons: namely because most designers think in grids (especially if you’re a print designer) and tables worked well in browsers. CSS support was sketchy at best and well you could do a lot with tables.

Fast forward today and designers are doing the doing the same thing with DIVs and SPANs.

In a recent article in Digital Web Magazine titled Everything You Know About CSS is Wrong, Rachel Andrew covers the table, table-row, table-cell, etc. display support now available in IE 8 beta. As mentioned in her article you can essentially turn a series of nested tags into a table-style layout using these values for the display CSS attribute. Thus you get all the table-based layout goodness without using any table tags.

Here’s an example, consider the following markup:

<div id="wrapper">
    <div class="row">
        <div class="cell">Column 1 content</div>
        <div class="cell">Column 2 content</div>
        <div class="cell">Column 3 content</div>
    </div>
    <div class="row">
        <div class="cell">Column 4 content</div>
        <div class="cell">Column 5 content</div>
        <div class="cell">Column 6 content</div>
    </div>
</div>

Now, let’s style it with the following CSS:

<style type="text/css">
#wrapper { display : table; border-spacing: 5px; }
.row { display : table-row; height: 125px; }
.cell { display : table-cell; border: 1px solid black; background-color: #ffd; }
</style>

Will yield the following result:

You can see how table-like the output is. The “table cells” here are rendered the same way the browser would render for a table. All the divs with display : table-cell inherit the same height from the row. For a simple layout where you as a designer need columns to have the same height, this is a pretty cool solution.

Now, if you’re a designer whose been in the trenches for more than a couple of years, you’re looking at this and crying as you reach for the emergency bottle of Wild Turkey. You spent many agonizing months trying to switch your thinking to Web Standards based layout and learning how to lay things out the “right way.” You’re probably mourning all the cool multi-dimensional nested tables which were more complex than getting a stable nuclear fusion with 2 silver spoons, copper wire and a zippo lighter. But hey! It rendered in IE!

Ok, here’s the bottom line.

Tables are for tables, table layouts are for… well … tables! Saying otherwise is sending a dangerous mixed signal to designers to go back to the bad habits of the past. Add to that the fact that CSS Table layouts using DIVs, don’t work in IE 7 nor IE 6. Mix in the fact that there’s no CSS equivalent to ROWSPAN and COLSPAN. Sprinkle in a ton of extraneous DIVs and SPANs just to get this kinda layout working and you have a pretty vile Table Layout soup. CSS or no CSS, I don’t like the smell of this.

Give me clean, semantic markup, broad CSS support and javascript to fill in the design gaps and I’m happy.

Rachael, everything I know about practical web design is right!