Tables are an efficient and effective method of presenting data visually but they can be often difficult to interpret, especially when there is a lot of information. People with disabilities, particularly those using a screen reader, may find it difficult to distinguish between column/row headings and the actual data, or may struggle to determine which data item is associated with which heading.
Using the appropriate table markup will make it easier for people with disabilities to interpret the data. By associating data cells with the appropriate heading and column/row information, screen readers are able to inform the user of this information for any given cell of the table.
//An example of a table displaying ticket prices at different price levels. The appropriate markup has been used.
<table>
<caption>
Table 1: An overview of ticket prices
</caption>
<tr>
<th scope="col"> </th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
<th scope="col">Thursday</th>
<th scope="col">Friday</th>
<th scope="col">Saturday</th>
<th scope="col">Sunday</th>
</tr>
<tr>
<th scope="row">Gold Tier</th>
<td>£30.00</td>
<td>£30.00</td>
<td>£30.00</td>
<td>£45.00</td>
<td>£60.00</td>
<td>£60.00</td>
<td>£45.00</td>
</tr>
<tr>
<th scope="row">Silver Tier</th>
<td>£20.00</td>
<td>£20.00</td>
<td>£20.00</td>
<td>£30.00</td>
<td>£40.00</td>
<td>£40.00</td>
<td>£30.00</td>
</tr>
<tr>
<th scope="row">Bronze Tier</th>
<td>£10.00</td>
<td>£10.00</td>
<td>£10.00</td>
<td>£15.00</td>
<td>£20.00</td>
<td>£20.00</td>
<td>£15.00</td>
</tr>
</table>