Tables Still Have a Place in Web Page Layout

August 3, 2007

Writes: Kevin Yank

At tonight’s meeting of the Melbourne Web Standards Group, Andrew Krespanis and I have been assigned to argue for the statement “Tables Still Have a Place in Web Page Layout.” Here’s a sneak peek at what we plan to say! Please bear in mind: we may not actually agree with everything that is stated here!

HTML tables enable web designers do one thing very well: design with 2D grids. And let’s face it: if one thing has remained constant in web design over the past ten years, it’s that designs are commonly based on 2D grids.

Without tables, HTML content is designed to only stack vertically, one block on top of the other. Grids require the horizontal and vertical stacking that tables can provide. You can emulate this to some extent using CSS floats, but that’s not what floats were designed to do; using them this way tends to produce a lot of unexpected problems and trigger obscure browser bugs.

The biggest reason given for avoiding HTML tables for layout is because table-based layout is misusing a feature intended for another purpose. We believe the same logic should apply to CSS floats: using floats for grid layouts is, to some extent, misusing CSS.

But we can argue ideals all day—the practical reality is that tables do some things much better than CSS.

For one thing, tables can give you columns that stretch to accommodate their contents’ width—automatically. In CSS, the closest thing you can do is specify column widths in ems, which are imprecise, and also force you to update your CSS every time the contents of the column change.

Another point in favor of tables is that my mom and dad can understand them. My parents will never “get” CSS grid layout techniques like negative margins and faux columns, nor should they be expected to.

Our opposition will no doubt tell you about accessibility problems caused by layout tables. Well, the Web should be universally accessible to publishers too, not just readers. We’re not saying that you should be using tables for layout, just that some people cannot yet be reasonably expected to lay out their sites with CSS, and for those people tables are still a good solution.

But what about the problems caused by layout tables, you may wonder?

What problems? Every browser and assistive technology currently in use has had to deal with layout tables for years, and will continue to do so for the foreseeable future.

A layout table is actually very easy to detect and handle appropriately. In the same way that a < div > or < span > tag with no semantically meaningful attributes can safely be ignored by systems looking to extract meaning from markup, a table with only bare < td > tags communicates no semantically significant information, and can be reasonably assumed to be a layout table.

Layout tables may even have some benefits if we open our minds to them. One cell in your layout grid may reasonably be considered a “header” for another cell. Layout tables let you describe this relationship in your markup, while div-heavy CSS layouts do not.

One day, browsers will support the CSS 3 Advanced Layout module, and grid layouts will be easy for anyone to produce with CSS. When that day comes, layout tables may well be out of business, and we’ll be happy to see them go.

In the meantime, tables still have a place in web layout.

Of course, there are two sides to every story, so be sure to read the next issue of the Tech Times, in which I’ll sum up the arguments of our opponents in tonight’s debate. Oh, and I’ll also let you know which side won!

About The Author: Kevin Yank is Editor, The SitePoint Tech Times

Technorati Tags: Web Page Layout | Web Standards | HTML Tables | Web Design | CSS Floats | CSS Grid Layout | Cascading StyleSheets | Website Accessibility | DIV CSS Layouts