Accessible Tables

Overview

A table is a structured set of data made up of of rows and columns (tabular data).

The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers.

While this sounds elementary in passing, and tables are easy to manipulate to visually communicate associations, tables can quickly lead to accessibility issues, as they require particular elements which may not be visible. When done correctly (simply), even blind people can interpret tabular data in an HTML table. A successful HTML table should enhance the experience of sighted and visually impaired users alike.

When to use a table

Tables should be used for tabular data, as this is what they are designed for.

Tables should not be used for layout purposes, even if their contents is data-centered. Instead, use CSS layout techniques as tables can easily reduce accessibility for visually impaired users.

Below are some common scenarios of when and when not to use a table:

Now, the snippets

Feel free to copy and paste the following code snippets into your websites and projects.

3-column table with thead, tfoot, and tbody

Code Snippet

<table class="table table-striped table-hover">
  <caption>A table of of fruit, quantity, and prices.</caption>
  <thead>
    <tr>
      <th>Fruit</th>
      <th class="text-right">Price</th>
      <th class="text-right">Quantity</th>
      <th class="text-right">Total</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tbody>
    <tr>
      <td>Apples</td>
      <td class="text-right">$0.72</td>
      <td class="text-right">1,229</td>
      <td class="text-right">$812.88</td>
    </tr>
    <tr>
      <td>Oranges</td>
      <td class="text-right">$0.59</td>
      <td class="text-right">980</td>
      <td class="text-right">$578.20</td>
    </tr>
    <tr>
      <td>Bananas</td>
      <td class="text-right">$0.23</td>
      <td class="text-right">34,076</td>
      <td class="text-right">$7,837.48</td>
    </tr>
    <tr>
      <td colspan="2"><b>Totals</b></td>
      <td class="text-right">36,285</td>
      <td class="text-right">$9,228.56</td>
    </tr>
  </tbody>
</table>