WCAG 2.0 – Examples of Compliant HTML Tables

Below are examples of a WCAG 2.0 compliant simple and a complex HTML table.

Don't forget to replace the table Caption and Summary.

Simple Tables

(skip to Complex Table)

Here is sample source code for creating a Simple HTML table.

Source Code for Simple Table

<table style="width: 300px;">
<caption>Sample of a Complex Table - This is the Caption</caption>
<thead>
<tr>
    <th id="t1h1">Header 1</th>
    <th id="t1h2">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
    <td headers="t1h1">example cell</td>
    <td headers="t1h2">example cell</td>
</tr>
<tr>
    <td headers="t1h1">example cell</td>
    <td headers="t1h2">example cell</td>
</tr>
<tr>
    <th id="t1h3">Subheader 1</th>
    <th id="t1h4">Subheader 2</th>
</tr>
<tr>
    <td headers="t1h1 t1h3">example cell</td>
    <td headers="t1h2 t1h4">example cell</td>
</tr>
<tr>
    <td headers="t1h1 t1h3">example cell</td>
    <td headers="t1h2 t1h4">example cell</td>
</tr>
<tr>
    <td headers="t1h1 t1h3">Sample Total</td>
    <td headers="t1h2 t1h4">Sample Total</td>
</tr>
</tbody>
</table>

Complex Tables

Here is sample source code for creating a complex HTML table.

Source Code for Complex Table

<table style="width: 300px;">
<caption>Caption of a Complex Table</caption>
<thead>
<tr>
    <th id="t1h1">Header 1</th>
    <th id="t1h2">Header 2</th>
</tr>
</thead>
<tbody>
<tr>
    <td headers="t1h1">example cell</td>
    <td headers="t1h2">example cell</td>
</tr>
<tr>
    <td headers="t1h1">example cell</td>
    <td headers="t1h2">example cell</td>
</tr>
<tr>
    <th id="t1h3">Subheader 1</th>
    <th id="t1h4">Subheader 2</th>
</tr>
<tr>
    <td headers="t1h1 t1h3">example cell</td>
    <td headers="t1h2 t1h4">example cell</td>
</tr>
<tr>
    <td headers="t1h1 t1h3">example cell</td>
    <td headers="t1h2 t1h4">example cell</td>
</tr>
<tr>
    <td headers="t1h1 t1h3">Sample Total</td>
    <td headers="t1h2 t1h4">Sample Total</td>
</tr>
</tbody>
</table>