Mind Your <table> Manners
By Molly E. Holzschlag
Without tables, most Web site designers working across platform and browser types would be unable to create effective layouts, even though current standards recommend against using tables for layout. Unfortunately the suggested alternative—CSS positioning—isn't a realistic option for creating widely interoperable sites. So, despite standards and recommendations, HTML and XHTML authors use tables to lay out their pages, and every visual editor on the market relies on them as a positioning method, too.
But tables can be difficult. In fact, most of the email questions I receive about HTML have to do with problems associated with them. I feel it would be helpful to answer the most common questions and problems here, as well as to provide tips and tricks for producing tables that are streamlined, sensible, and bug-free.
Four ways to make your table layouts better:
- align your layout vertically, rather than horizontally,
- avoid gaps in your spliced images,
- nest and stack,
- use HTML 4.0 features that make tables more accessible.
Horizontal vs. Vertical Orientation
So what's the primary secret to streamlining tables? You might be surprised to learn that it has to do with how you spatially design them. Instead of planning from the horizontal layout of a design, study the vertical layout and plan your tables accordingly.
People who read and write in horizontally oriented languages tend to organize visual information horizontally—and while this might be great for the flow of content, it's not necessarily the best way to structure a page.
