The Caption element

The CAPTION element provides the Web developer with a standard way of programmatically associating the title of the table with the table itself. Has a default format.

Calendar of Events 2003
Title Location Start Date End Date
a Light for Sight (incorporating the Festival of Light) Frankston and surrounds 28/11/2003 28/11/2003
Lakeside Run or Walk for Sight Lake Weeroona,
Bendigo
30/11/2003 30/11/2003

Example code

<table>
<caption>Calendar of Events 2003</caption> <tr> <th>Title</th> <th>Location</th> <th>Start Date</th> <th>End Date</th> </tr> <tr> <td>a Light for Sight (incorporating the Festival of Light)</td> <td>Frankston and surrounds</td> <td valign="top">28/11/2003</td> <td valign="top">28/11/2003</td> </tr> <tr> <td>Lakeside Run or Walk for Sight</td> <td>Lake Weeroona,<br /> Bendigo</td> <td valign="top">30/11/2003</td> <td valign="top">30/11/2003</td> </tr> </table>

The Summary attribute

The Summary attribute, is not represented visually. It is rendered from the HTML code by assistive technology like screen readers and talking browsers.


Calendar of Events 2003
Title Location Start Date End Date
a Light for Sight (incorporating the Festival of Light) Frankston and surrounds 28/11/2003 28/11/2003
Lakeside Run or Walk for Sight Lake Weeroona,
Bendigo
30/11/2003 30/11/2003

Example code

<table summary="Table of Vision australia foundation events 
consisting of four columns for the title, location, start and end dates.">
<caption>Calendar of Events 2003</caption> <tr> <th>Title</th> <th>Location</th> <th>Start Date</th> <th>End Date</th> </tr> <tr> <td>a Light for Sight (incorporating the Festival of Light)</td> <td>Frankston and surrounds</td> <td valign="top">28/11/2003</td> <td valign="top">28/11/2003</td> </tr> <tr> <td>Lakeside Run or Walk for Sight</td> <td>Lake Weeroona,<br /> Bendigo</td> <td valign="top">30/11/2003</td> <td valign="top">30/11/2003</td> </tr> </table>

The th element

A very important step toward creating an accessible data table is to designate row and/or column headers. This is easy enough to do. Most authoring tools provide a method of changing data cells into header cells. In the markup, the td element is used for table data cells and the th element is used for table header cells

Example

Calendar of Events 2003
Title Location Start Date End Date
a Light for Sight (incorporating the Festival of Light) Frankston and surrounds 28/11/2003 28/11/2003
Lakeside Run or Walk for Sight Lake Weeroona,
Bendigo
30/11/2003 30/11/2003

Example code

<table summary="List of Vision australia foundation events includng the 
title,location, start and end dates and a link to further information 
about each event" border="1">
<caption>Calendar of Events 2003</caption>
<tr>
<th>Title</th>
<th>Location</th>
<th>Start Date</th>
<th>End Date</th>
</tr>

<tr>
<td>a Light for Sight (incorporating the Festival of Light)</td>
<td>Frankston and surrounds</td>
<td>28/11/2003</td>
<td>28/11/2003</td>
</tr>

<tr>
<td>Lakeside Run or Walk for Sight</td>
<td>Lake Weeroona,
Bendigo</td>
<td>30/11/2003</td>
<td>30/11/2003</td>
</tr>
</table>

The scope attribute

The scope attribute tells the browser and screen reader which direction the heading applies - down the column or across the row.

Calendar of Events 2003
Title Location Start Date End Date
a Light for Sight (incorporating the Festival of Light) Frankston and surrounds 28/11/2003 28/11/2003
Lakeside Run or Walk for Sight Lake Weeroona,
Bendigo
30/11/2003 30/11/2003

Example 2 code

<table summary="List of Vision australia foundation events including the 
name, location, start and end dates and a link to further information about each event">
<caption>Calendar of Events 2003</caption>
<tr>
<th scope="col">Title</th>
<th scope="col">Location</th>
<th scope="col">Start Date</th>
<th scope="col">End Date</th>
</tr>

<tr>
<th scope="row">a Light for Sight (incorporating the Festival of Light)</th>
<td>Frankston and surrounds</td>
<td>28/11/2003</td>
<td>28/11/2003</td>
</tr>

<tr>
<th scope="row">Lakeside Run or Walk for Sight</th>
<td>Lake Weeroona,<br />
Bendigo</td>
<td>30/11/2003</td>
<td>30/11/2003</td>
</tr>
</table>