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.