Table Structure

If you are using tables in your document:

  • Use them only to display data, not just for layout purposes. CSS should be used to manage layout.
  • Make sure to give tables structure by providing headings for your columns and a caption, which can act as a summary for the table. A sighted user will be able to visually determine the position of a given cell in the grid. Users of assistive technology, however, need this additional structure to do the same.

The following correctly structured html:

<table>
    <caption>Table of Vegetables and Fruits</caption>
    <thead>
        <tr>
            <th scope="col">
            Vegetables
            </th>
            <th scope="col">
            Fruits
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
            Squash
            </td>
            <td>
            Limes
            </td>
        </tr>
    </tbody>
</table>

produces the following table:

Table of Vegetables and Fruits
Vegetables Fruits
Squash Limes

For more information, see WebAIM's Creating Accessible Tables.