Kimler Adventure Pages (http://randsco.com)

Don't web designers now know NOT TO USE TABLES FOR PAGE LAYOUT? I thought so, but an email, received from the President of a web media company, says otherwise

Tables for tabular data ONLY ... NOT for LAYOUT!!

Last night, I had an interesting e-mail exchange, in which someone was using an ASP.net datalist to display three PZ3 images in a row. They were having problems with IE. (No surprise there).

First, I know very little about ASP.net, but I asked the fellow for a copy of the page (X)HTML and CSS and said I'd look into the problem.

It was a basic page, nothing too odd (though I did notice a bunch of ASP.net-specific bloat). I quickly found the problem: the fellow was using a table to contain the single row of three PZ3 images, each in their own cell (browsers often fail to correctly interpret CSS directives inside table cells).

I haven't used tables for layout in years and assumed that (by now) the message to do so, would've gotten out. Obviously not.

I wrote back and said, "Using a table to hold the three images is semantically incorrect (because no tabular data are being displayed) and the root of your problem. To fix it, just take the three images out of the table." I even provided some XHTML-valid code that would accomplish what he wanted (semantically correct and more succinct).

The response I got back, floored me.

Huh?

Maybe what he's trying to say is that "he can't get rid of the table", but if so, it's because of a limitation in the ASP.net language he's using and not because it's semantically incorrect to do so. At the end of the day, it doesn't matter how ASP.net stores/retrieves/interprets the image data, what does matter is:

Displaying three images in a row, is NOT a display of "tabular data".

To top it off, this fellow isn't just anyone, he's the President of a web media company. He should KNOW BETTER!

The exchange bothered me enough that I thought I'd write my own version of "What I think should be tacitly understood anyone writing HTML code".

To find out why tables are bad (should be used for displaying tabular data, NOT FOR LAYOUT) and what is "tabular data" anyway? .... read on.

- -

Why Tables are BAD-BAd-Bad-bad

Never use tables for layout.

Truth is, they're not bad, they're just badly abused. Tables are fine for displaying tabular data, but should never be used for page layout. The problem with tables has arisen, because they have been abused and used for page layout, by many designers.

The whole goal of using tables is to "arrange data -- text, preformatted text, images, links, forms, form fields, other tables, etc. -- into rows and columns of cells" (Source - W3C HTML Recommendation).

Furthermore, the W3C also recommends against using tables for layout. Here's what they have to say on the matter (same document):

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Besides simply being a W3C recommendation, not using tables for layout just makes plain sense.

Why Tables for Layout Suck

• Tables require more code.
• Tables take longer to load.
• Tables prevent incremental page display.
• Tables may require image slicing.
• Tables break text copying on some browsers.
• Tables prevents some CSS from working within them.
• Tables layouts are convoluted and confusing.
• Tables are semantically incorrect for layout.
• Tables break for screen readers.
• Tables make redesigns/modifications difficult.

The Solution & the Backlash

The solution, of course, is to use CSS and DIVs (along with other, semantically correct, elements) to design and lay out a web-page. The benefits for designing this way are readily apparent to anyone who is doing it - flexibility, accessibility and future-proofing (among others).

Web developers are beginning to design to web standards, making semantically-correct pages. That's a good thing. The backlash, is that using tables has gotten a bad rap. Many people have interpreted "Don't use tables for layout" into "tables are bad".

Many forget that tables still have a useful and semantically correct place on a web page - for displaying tabular data.

So What ARE Tabular Data?

Tabular data are the kind of data one would expect to see in table-form, or information that has a two-dimensional relationship. Consider the following table (LOL - oh crap, now I have to make up a table, which I don't often have need to do ... and style it! ):

The above example table, which could be titled "The Three Most Popular Dog Names", has relationships in both the horizontal direction (Popularity, Dog Name & Vote) and the vertical direction (Popularity, Dog Name or Vote lists). In other words, it has two-dimensional relationships. Though it's possible to present the data some other way, it just makes sense to arrange it in columns and rows.

That's a good way of determining IF your data should be presented in a table or not, (i.e., is it tabular data?) - does it have 2-D relationships and does it make sense to display it in rows and columns?. (Could your table cells fit into Excel, or some other spreadsheet program, having a descriptive row and column titles)? If the answer is 'yes', then you're likely dealing with tabular data and should use tables. If 'no' (as in the case with three images in a row), then it's NOT tabular data and shouldn't be inside a table.

Conclusions

Tables are not inherently "bad", but they've been abused. Use them ONLY for displaying tabular data ... not for page layout.

I didn't think I needed to write this, but I sincerely hope it helps others. (Hopefully, the President of a certain web media company, for one.)