Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

The Holy Grail Of Web Page Design: Look Ma, No Tables

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

v2 i13
Originally Published: August 31, 2006

If you do any web page design - or know something about what's under the hood in the source code - sooner or later you'll come to the matter of designing pages without using tables.

Since the dawn of the web, HTML tables have been a trusted, sturdy, and highly browser compatible way to organize web page content into rows and columns. This allows page creators to layout their content into cells to gain control over their designs in a way not otherwise easily done.

Because tables reliably divide a page into cells, they're easy to work with. If you're coding or editing pages by hand, or using an editor like Dreamweaver, it doesn't take long to see that what follows is a table with three cells.

Code View

<table width="50%" border="2">
<tr>
<td>Left Cell</td>
<td>Middle Cell</td>
<td>Right Cell</td>
</tr>
</table>

Browser View

Left Cell Middle Cell Right Cell

But did you know that tables ARE NOT to be used for layout? Tables were put into this world solely for the presentation of tabular data. Translation: If you've got a calendar, math table, or train schedule, use table markup. That's the only proper reason to use a table.

Increasingly - and because tables are not to be used for page layout - tables are being replaced by the use of the positioning properties in Cascading Style Sheets. By dividing page content into boxes (that's what the <div></div> tag does), you can move the boxes around your page with CSS.

So is CSS the best way to do page layout? Can you get rid of layout tables altogether? Should you even think of getting rid of tables?

That depends on whom you ask. My answer: BE CAREFUL about getting rid of tables. Browser support of CSS positioning properties is certainly better than it used to be, but it has quite a way to go. That's a huge reason why its widespread use is being held back.

The more adept I've become with XHTML and CSS, the more I find myself creating pages with fewer and fewer tables. So can you.

Do I think layout tables will ever disappear from the web? Not in my lifetime (probably not in yours either) because...

  1. web page editors that can set a beautiful table, choke when using CSS positioning properties
  2. browser support of CSS positioning properties is very uneven
  3. working with a series of <div> tags and getting them to behave is not easy (because of browser compatibility issues)
  4. the W3C has not officially blessed CSS positioning specs.

I've seen more than one designer-genius say, "I tried, but I gave up on using CSS positioning for complex designs." So, until the above issues are resolved, where it makes sense and it's practical (supported well by browsers), use CSS. But, if you need to use tables for more complex layout, I won't tell.

Here are a few resources to help you work with CSS positioning properties:

Now for a few "Look Ma, No Tables" examples (look at the source code):