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.

Sample of Table Caption
Header 1 Header 2
example cell example cell
example cell example cell
example cell example cell
example cell example cell
Sample Total Sample Total

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.

Caption of a Complex Table
Header 1 Header 2
example cell example cell
example cell example cell
Subheader 1 Subheader 2
example cell example cell
example cell example cell
Sample Total Sample Total

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>
Follow Michael Milette:

Moodle LMS Consultant

Michael Milette enjoys sharing information and uses his skills as an LMS developer, leader and business coach to deliver sustainable solutions and keep people moving forward in their business life.

Add a comment:

Your email address will not be published. Required fields are marked *