Tables, Divs, and Table-Based Divs

Layouts with Table Tags Are Bad

By now, most web developers understand that using table tags to define the layout of your page is a bad thing.

  • Semantically, table tags are meant for holding tabular data.
  • Using tables (and table rows, and table cells) often results in excessive markup, which leads to bloated web pages that are harder to maintain and heavier in terms of bandwidth.
  • Tables dictate a certain rigidity of structure in the HTML, preventing you from offloading layout styling to a stylesheet, where it could be more easily maintained.
  • Table tags are less elegant, and all your hip web developer friends will laugh at your 1998 HTML skills.

Being Realistic

Despite all these great reasons not to use table tags for layout, there are still 2 big reasons why people continue to use them.

  • Tables are easier.
  • Table layouts let you do things you simply can’t do otherwise.

You know what? These are good reasons. Not “good” in the correct sense, but “good” in the realistic sense. Not everyone is a CSS ninja. And when there’s a deadline looming, you may not have the time to juggle floated divs and various clearing tricks to get a tableless layout working — and on all browsers. Meanwhile, your visitors don’t care how “good” your HTML is.

Best of Both Worlds

But personally… Despite what I just said, I can’t use tables. Call it a pride issue. And recently, I came across a really tough layout problem that I could have solved in 2 minutes using tables, but I knew there had to be a better way.

And that better way is: display: table-cell.

Using the display CSS property, you can actually tell divs to render as if they were table cells. For example, this:

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

Will render more or less the same as this:

<div>1</div>
<div>2</div>
<div>3</div>

With this CSS:

div { display: table-cell; }

This is great. Since it behaves just like classic table layouts, we have a conceptually easy layout tool, and we can apply table-based layout techniques that were difficult/impossible otherwise.

Side note: notice I’m not wrapping these divs with equivalent “row” (display: table-row) and “table” (display: table) divs. I could, but the extra markup is unnecessary thanks to the concept of anonymous tables.

No, Really, It’s OK

Now, if you’re like me, you probably scoffed at this. Hard. What’s the point? Why work so hard to avoid tables and use divs, just to apply CSS to those divs to make them work exactly like the tables we all agreed were so terrible?

The important thing to remember is that we didn’t turn the divs into tables. We just told them, via CSS, to render in a manner similar to tables.

Remember those 4 bullet points I gave at the beginning of this article about why tables for layout are bad? Well, let’s think through them:

  • We’re still using div tags instead of table tags in our HTML, so we’re still semantically correct.
  • As you can see in the sample I gave, the markup is still much simpler than the table tags equivalent.
  • The divs in the HTML do not dictate the presentation. We have correctly shifted this burden to the CSS, where it belongs.
  • You’re doing it right, without table tags, so your web developer friends won’t laugh at you.

As you can see, all concerns are addressed. So go forth and add this technique to your arsenal, guilt-free.

Hey, you reached the end!

Feel free to check out my other blog posts or subscribe to my RSS feed. You can also click a tag below to see related blog posts.