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

View correlation with WAI checkpoints

Ideally you should use CSS for layout, but in the real world the use of tables is often far easier to accomplish. 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:
- Top left to bottom right, row by row
Do not use <th> or other structural tags for layout purposes:
- If this formatting appearance is required (i.e. centered and bold) use CSS
Describe the purpose of the section using the summary attribute, e.g.

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 (%)

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 linearise 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:

<table> 

<tr> 

<td>(put a single pixel gif here)</td> 

<td rowspan="2">Page Content</td> 

</tr> 

<tr> 

<td>The navigation menu goes here</td> 

</tr> 

</table>

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

Recommendations

Examples