Tables for layout

Truth

Tables are a way to present repetative data, such as an accounting journal or an inventory list.  They have also been used to lay out visual elements on a page, similar to the 'grid' system used in print publishing.

Consequences

Audio user agents (programs that read web pages aloud, often used by the blind) understand the use of tables for repetative data, but they cannot comprehend the use of tables for layout of possibly unrelated items.  They will therefore read the items as if they represented repetative data.  This may confuse the user, due to the order in which the items are read.

Table cells cannot 'spill' to use additional vertical space if the window width is too narrow to contain an entire row, thus requiring the user to scroll horizontally. 

Recommendations

Use HTML tables only for repetative data.  Use CSS for layout, even if you use the display: table property and its brethren to get the result you want.  This at least separates the style from the semantics of your page.

In case you are more influenced by authority than logic, here's what the W3C has to say about using tables for layout:

"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."

Tips

  1. When converting from HTML tables to CSS, you will eventually encounter some table-like behavior that you can't figure out how to duplicate.  When that happens, try styling the affected block with display: table.  When you get curious about why that worked, read about the various table-related display properties, which can be assigned to HTML elements.

Last revised 30 Jan 2006