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.

Figure 1: Sample of Table Caption table
Header 1Header 2
example cellexample cell
example cellexample cell
example cellexample cell
example cellexample cell
Sample TotalSample Total

Source Code for Simple Table

<table summary="Summary of table goes here" border="0" cellspacing="0" style="width:300px;">
  <caption align="left">Figure 1: Sample of Table Caption table</caption>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td scope="row">example cell</td>
      <td scope="row">example cell</td>
    </tr>
    <tr>
      <td scope="row">example cell</td>
      <td scope="row">example cell</td>
    </tr>
    <tr>
      <td scope="row">example cell</td>
      <td scope="row">example cell</td>
    </tr>
    <tr>
      <td scope="row">example cell</td>
      <td scope="row">example cell</td>
    </tr>
  </tbody>
  <tfoot>
    <!-- optional -->
    <tr>
      <td scope="row">Sample Total</td>
      <td scope="row">Sample Total</td>
    </tr>
  </tfoot>
</table>

Complex Tables

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

Sample of a Complex Table - This is the Caption
Header 1Header 2
example cellexample cell
example cellexample cell
Subheader 1Subheader 2
example cellexample cell
example cellexample cell
Sample TotalSample Total

Source Code for Complex Table

<table summary="Summary of table goes here" border="0" cellspacing="0" style="width:300px;">
  <caption align="left">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>
[shareaholic app="share_buttons" id="00000000"]

Leave a Reply