To gain the most from this lab, you should have familiarity with:
For this lab, you will need:
To ensure accessibility for your HTML tables, it is imperative that the table be properly formatted with the 'thead', 'tbody' and 'tfoot' tags. The columns and/or rows should be associated with their proper headings. Without these structural tags, someone who cannot see the table is unable to properly navigate the table and discern its intent.
In addition to the overall structural tags, the table should also contain "caption" and "summary" information to describe the table and the overall message that the table represents.
Now take an existing non-compliant HTML table and make it accessible. This will involve the following steps:
First, here is the non-accessible HTML table that you will convert:
<table border="1" >
<tr>
<td>Course ID</td>
<td>Course Name</td>
<td>Enrollment</td>
</tr>
<tr>
<td>15459</td>
<td>Introduction to Linear Algebra</td>
<td>21</td>
</tr>
<tr>
<td>15558</td>
<td>Calculus I</td>
<td>42</td>
</tr>
<tr>
<td>15559</td>
<td>Calculus II</td>
<td>29</td>
</tr>
<tr>
<td>15560</td>
<td>Calculus III</td>
<td>20</td>
</tr>
<tr>
<td>Total</td>
<td></td>
<td>92</td>
</tr>
</table>
If the above HTML table was displayed in a Web browser, it would show up as a reasonably-formatted table. However, the current navigation structure would not be sufficient to ensure accessibility. Here is what the table as-is would look like:
| Course ID | Course Name | Enrollment |
| 15459 | Introduction to Linear Algebra | 21 |
| 15558 | Calculus I | 42 |
| 15559 | Calculus II | 29 |
| 15560 | Calculus III | 20 |
| Total | 92 |
Now apply the above-listed steps to ensure accessible, well-formatted table structure.
For this example, a reasonable caption might be "Enrollments for various courses, Summer 2003." A summary for this table should include a commentary on the table data, something like: "This table shows good enrollments for four mathematics courses; enrollment declines in more advanced courses, as expected."
After following the above-stated steps to make HTML tables accessible, you should generate something like the following:
<table border="1"
summary="This table shows good enrollments for four mathematics courses;
enrollment declines in more advanced courses, as expected">
<caption>Enrollments for various courses, Summer 2003</caption>
<thead>
<tr>
<th scope="col">Course ID</th>
<th scope="col">Course Name</th>
<th scope="col">Enrollment</th>
</tr>
</thead>
<tbody>
<tr>
<td>15459</td>
<td>Introduction to Linear Algebra</td>
<td>21</td>
</tr>
<tr>
<td>15558</td>
<td>Calculus I</td>
<td>42</td>
</tr>
<tr>
<td>15559</td>
<td>Calculus II</td>
<td>29</td>
</tr>
<tr>
<td>15560</td>
<td>Calculus III</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<th></th>
<th>92</th>
</tr>
</tfoot>
</table>
When displayed in a Web browser, the above, accessible HTML table should appear something like this:
| Course ID | Course Name | Enrollment |
|---|---|---|
| 15459 | Introduction to Linear Algebra | 21 |
| 15558 | Calculus I | 42 |
| 15559 | Calculus II | 29 |
| 15560 | Calculus III | 20 |
| Total | 92 |
This properly-formatted table above is accessible to all users.
The next page will present information about plug-ins.
College of Architecture (COA)
Fax: 404-894-9320
Phone: 404-894-4960 (v/tty)
User Agreement
HTML
Lab: Tables
Previous Page
