Page Layout Tables
CSS, divs, and stacked tables for web pages
General Rules
To do layout tables right, a few general rules should be observed, because it’s too easy to make an unwieldy mess with them. But it’s even easier to do it right, as we’ll soon see.
- Avoid wysiwyg HTML editors, as they tend to generate pages loaded with deprecated markup. They also make it far too easy to nest tables. It’s much easier to just hand-code the layout, once one understands how to write CSS for tables, and use stacking instead of nesting. Use a good tabbed text editor, and a browser or two for testing. That way, one has full control and is no longer a slave to the whims of the whizzy monster.
- Layout tables should be stacked, not nested. There is no need to enclose the whole page in one table and then nest a bunch more tables inside. Make a table for the header, then another one with 2 or 3 cells for content columns, then another one for the footer. The only nested table, if any, might be a visible data table within a content cell. Simply have different CSS classes for layout tables and data tables. It’s very easy.
- Images, data tables, and divs may be floated in the content cells, if needed, but this should not be deeply nested, since that tends to create a cluttered look, and makes coding and maintenance cumbersome. It also creates accessibility issues. Keep it simple! Make the content fancy, not the skeleton.
- Learn to control table elements with CSS. Write for Strict, not Transitional. Remove all transitional presentation from all tags. A few of the deprecated table attributes do not have direct CSS replacements. We’ll look at some of them later. Learn how to unconstrain widths and font sizes by using CSS’s powerful features like percentage, EM, and auto. A really good layout is one that gives the end-user a lot of control without breaking anything. Tables shrink and grow well in all browsers, and generally don’t break the layout.
The bottom line is that tables are fine for layouts, if they are CSS’d properly and are stacked, not nested. But what about complex layouts? Nesting of tables, divs, or both, beyond two levels is just too complex. Why do some people think a layout has to be so complex? What’s wrong with a header, two or three columns, and a footer? Sure, some sites are complex, but the necessary complexity is in the scripting, not the basic page skeleton, which is what we’re dealing with here.
Next, we’ll look under the hood of a stacked layout example.
Continued...
