Page Layout Tables
CSS, divs, and stacked tables for web pages
Of Divs and Tables
First it was a fad, then a bandwagon, and now an ideology to spread dogmatic rhetoric about the evils of tables. “Uses CSS, not tables” is an oft-seen passphrase, implying—nay, insisting—that the two are mutually exclusive. That is obviously incorrect, since tables may be, and indeed should be, completely CSS-controlled, and are easier to use and more reliable than multiple floated divs.
The main problem with table layouts is that wysiwyg HTML editors allowed users to create layouts by nesting a bunch of tables, which it also loaded with deprecated (and often proprietary) formatting attributes. As layouts became more complex, all that messy code became too difficult to maintain.
Then along came good support for CSS, and developers and designers threw out tables and started using other HTML tags, mostly divs and LI’s combined with the CSS float, to create table-less layouts. That brought another set of problems.
The main problem with using floated divs is called IE. Among its collection of rendering bugs are many related to its poor handling of floats. Every other modern browser gets them right (following standards), but IE, though a little better in recent versions, continues to break floats. Until they fix it, IE is the main reason to use layout tables. That goes against a popular ideology, but I see it as just being practical, and I refuse to play cat-and-mouse games with endless browser bugs.
- Problem: Messy tables. Solution: Use floated divs.
- Problem: Browser float bugs. Solution: Use messy CSS hacks.
- Problem: Messy hacks. Solution: Use clean tables.
This site is designed with a simple div layout (with only one floating), so I’m not against div layouts. Some of my other sites are designed with simple table layouts. In each case, it’s the layout that determines whether I’ll use divs or tables. Either way, they are used properly and not deeply nested. If the layout needs more than one float in close proximity, IE will misbehave, and that’s the time to use a proper table layout.
This article is not about which way is better, because both are useful for layouts in various circumstances, and both may be misused and poorly implemented. What’s actually better is using either or both correctly. However, some of the div-only folks raise a veil of technical objections that, in my opinion, just don’t quite add up:
- “Tables are only for data.” So? Isn’t a whole web page just data? Does a browser know the difference between web page elements, and a box of names and phone numbers? A div is a general purpose container. A table is a special purpose container that contains a grid of containers, and they don’t care what you put in them. It’s just that simple.
- “Tables mix layout with content.” Yes, and a bunch of nested, floated divs don’t? What they really mean is, they don’t know how to use CSS with tables, so would have to use all those messy old transitional attributes in every tag.
- “Tables put way too much markup in the page.” Yes, if one leaves all that deprecated markup in every tag. But with CSS, tables use no more markup than divs, except for the occasional table and tr tags, and even those are offset by the table’s need of less CSS than floated divs.
- “The whole table has to load before the page appears.” That’s a real problem for all those users out there still running 1200-baud modems… Stacking, instead of nesting, solves that problem, too.
- “Tables have accessibility problems.” Yes, nested tables don’t linearize well. Neither do nested floating divs. But stacked tables do, and before we’re done here, I’ll prove it by running a stacked-table layout through four accessibility validators, with perfect scores.
- “Tables need an invisible graphic in every cell.” No, and later we’ll see how to use CSS to eliminate the dreadful 1-pixel gif, even in browsers that don’t support min-width.
- “Table layouts are not semantically correct.” Semantic-shemantic! Markup either consistently renders as intended, or it doesn’t. If the writing is good and it’s presented correctly, it delivers the intended meaning, and is therefore semantically correct.
Now let’s see how table layouts may be correctly used.
Continued...
