DEV 8.2 Layout tables: ensure correct readout order, avoid complicated nesting, describe with summary attribute

Ideally you should use CSS for layout but, in the real world, the use of tables is often far easier to accomplish. In addition, you may be restricted to the use of tables if you are adapting an existing site or if layout tables are a restriction of the content management system you are using.

Layout table usage is OK as long as accessibility is kept in mind.

  • Avoid complex and nested tables:
    • Aim for as simple a structure as possible;
    • Choose simple stacked tables rather than single complex or multiple nested tables.
  • Ensure the linear reading order makes sense:
    • Tables read out from top left to bottom right, row by row;
    • Test to ensure that a logical order is given.
  • Do not use structural tags for layout or styling purposes
    - use CSS instead:
    • e.g. do not use <th> to get centered and bold text.
  • Use the summary attribute to describe the purpose of the section, for example:
    • summary="page contents";
    • Summary="main navigation";
    • Use summary="" if description will not add useful information (i.e. don't over do the summary descriptions.)
  • Use relative sizing (%) - wherever possible to create a fluid width (see DEV 1.7.)

Tip: It is possible to change the linear read out order of tables without altering the design by using the 'table hack' e.g. to put content first before a column of navigation, put an invisible gif in the first cell, then rowspan=2 in the next cell (containing the content). The next row then contains the menu (see examples).

Tip: To check if your tables linearize well, use the online accessibility validator the wave or Opera, which allows you to turn off tables completely.

Poor layout table producing different readout order from that seen visually

The table hack - presents content first even though visually there is a left column menu:

<td>(put a single pixel gif here)</td>
<td rowspan="2">Page Content</td>
<td>The navigation menu goes here</td>