Compare the following source code with the less accessible data table below. What makes the table above more accessible are the <th scope="col"...>, and <th scope="row"...> tags (which are presented in blue bold text below for easier viewing). The <caption> tag is optional for accessibility, but it can help screen reader users better understand what they are viewing. Unfortunately most WYSIWYG HTMLcreator software (FrontPage, Dreamweaver, etc.) doesn't allow you to create accessible tables without marking up the HTML source code. But as you can see from the examples below, at least with a simple table the proper HTML markup is not very difficult.
Return to Creating Accessible Tables<table cellspacing="1" cellpadding="4" border="1"><caption>Course Outline -- subject to change</caption>
<tr>
<th scope="col" width="12" valign="top" align="center"> Week </th>
<th scope="col" width="25" valign="top" align="center"> Date </th>
<th scope="col" width="400" valign="top" align="center"> Topic </th>
</tr>
<tr>
<th scope="row" width="12" valign="top" align="center"> 1 </th>
<td width="25" valign="top" align="center"> <abbr title="September">Sept.</abbr> 6 </td>
<td width="400" valign="top" align="left"> intakes-- reserve computer time and sign Student Educational Contract (SEC) </td>
</tr>
<tr>
<th scope="row" width="12" valign="top" align="center"> 2 </th>
<td width="25" valign="top"><p align="center"> <abbr title="September">Sept.</abbr> 13 </p></td>
<td width="400" valign="top"><p align="left"> Pretest and introduction to class </p></td>
</tr>
<tr>
<th scope="row" width="12" valign="top" align="center"> 3 </th>
<td width="25" valign="top"><p align="center"> <abbr title="September">Sept.</abbr> 20 </p></td>
<td width="400" valign="top"><p align="left"> Overview of the Windows desktop </p></td>
</tr>
</table>
-- don't do this, it is missing <th scope="col"...>, and <th scope="row"...> tags unlike the more accessible table above
<table cellspacing="1" cellpadding="4" border="1">
<tr>
<td width="12" valign="top" align="center"> Week </td>
<td width="25" valign="top" align="center"> Date </td>
<td width="400" valign="top" align="center"> Topic </td>
</tr>
<tr>
<td width="12" valign="top" align="center"> 1 </td>
<td width="25" valign="top" align="center"> <abbr title="September">Sept.</abbr> 6 </td>
<td width="400" valign="top" align="left"> intakes-- reserve computer time and sign Student Educational Contract (SEC) </td>
</tr>
<tr>
<td width="12" valign="top"><p align="center"> 2 </p></td>
<td width="25" valign="top"><p align="center"> <abbr title="September">Sept.</abbr> 13 </p></td>
<td width="400" valign="top"><p align="left"> Pretest and introduction to class </p></td>
</tr>
<tr>
<td width="12" valign="top"><p align="center"> 3 </p></td>
<td width="25" valign="top"><p align="center"> <abbr title="September">Sept.</abbr> 20 </p></td>
<td width="400" valign="top"><p align="left"> Overview of the Windows desktop </p></td>
</tr>
</table>
Return to Creating Accessible Tables