Designing tables, Monash Web Style Guide

Tables are designed to be used only for showing data. However, they are widely used on websites to control layout. Using tables for layout is now being phased out because of improvements to browsers and the layout techniques that can be achieved using style sheets.

Layout tables are still used at Monash because many of our users still use older browsers that don't work well with style sheets. In the coming year or two we will be monitoring the use of Netscape 4 and looking to phase out table-based layouts.

Guidelines for creating data tables

Avoid designing complex data tables. They can cause usability problems for all users and are particularly difficult to markup for screen reader accessibility. Sometimes complex data is best communicated with a diagram or visual representation of some kind.

The most important thing for accessibility of data tables is to make sure that the content is read or presented in the correct order. In browsers that do not support tables the information is treated as a series of paragraphs. The paragraphs are read in a particular order, starting with the top left cell. You can check the reading order with a tool like The Wave.

Structural markup should be used to distinguish table header cells from data cells. Header cells should be marked up with <th id> and data cells should be marked up with <td headers>. Each data cell references the relevant headers, for example:


<th id="monday">Monday</th> 

<th id="low">Low impact</th> 

<td headers="monday low"> 10am </td>

Tables should also include an appropriate summary attribute that describes the content contained in the table. For example, "Aerobics class sessions, Monday to Friday".


<table width="100%" summary="Aerobics classes and session times, Monday to Friday.">

Another way of providing summary information for a table is to give the table a title using the <caption> element.


<table width="100%" summary="Aerobics classes and session times, Monday to Friday."> 

<caption>Class times</caption>

Markup for entire table


<table width="100%" border="1" cellspacing="0" cellpadding="5" summary="Aerobics classes and session times, Monday to Friday." > 

<caption>Class times</caption> 

<tr> 

<td></td> 

<th id="monday">Monday</th> 

<th id="tuesday">Tuesday</th> 

<th id="wednesday">Wednesday</th> 

<th id="thursday">Thursday</th> 

<th id="friday">Friday</th> 

</tr> 

<tr> 

<th id="low">Low impact</th> 

<td headers="monday low">10am</td> 

<td headers="tuesday low">2pm</td> 

<td headers="wednesday low">10am</td> 

<td headers="thursday low">2pm</td> 

<td headers="friday low">10am</td> 

</tr> 

<tr> 

<th id="step">Step</th> 

<td headers="monday step">8am</td> 

<td headers="tuesday step">5pm</td> 

<td headers="wednesday step">1pm</td> 

<td headers="thursday step">9am</td> 

<td headers="friday step">2pm</td> 

</tr> 

<tr> 

<th id="pilates">Pilates</th> 

<td headers="monday pilates">7am</td> 

<td headers="tuesday pilates">7am</td> 

<td headers="wednesday pilates">7am</td> 

<td headers="thursday pilates">7am</td> 

<td headers="friday pilates">7am</td> 

</tr> 

<tr> 

<th id="spin">Spinning</th> 

<td headers="monday spin">3pm</td> 

<td headers="tuesday spin">8pm</td> 

<td headers="wednesday spin">3pm</td> 

<td headers="thursday spin">8pm</td> 

<td headers="friday spin">3pm</td> 

</tr> 

</table>

Designing tables

Guidelines for creating data tables

Markup for entire table

Resources