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

Recommendations

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

Examples