General bad table examples

Oftentimes, developers forget to mark up a table's header cells with the proper HTML tag. Instead, they are styled only visually as headers. But tables lacking proper header cells are tricky to navigate by screen reader users, and the more complex they are, the less they can be understood.

Most accessibility problems regarding tables are caused due to bad semantics. So if you haven't done this yet, go back and read Semantics and their importance for accessibility.

No header cells

The table in the following example does not offer any real header cells (<th> elements); instead, only data cells are used (<td> elements). Those cells that are meant to be headers are only styled visually using CSS font-weight: bold, attached to a .th class.

Generally bad table, without headers

Show HTML code

Show CSS code

<table>
  <caption>My Hobbies</caption>
  <thead>
    <tr>
      <td class="th">
        Name
      </td>
      <td class="th">
        Description
      </td>
      <td class="th">
        Additional Resources
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="th">
        Playing Soccer
      </td>
      <td>
        Soccer is a team sport played between two teams of eleven players with a spherical ball.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Association_football">Wikipedia</a>
      </td>
    </tr>
    <tr>
      <td class="th">
        Dancing
      </td>
      <td>
        Dance is a performing art form consisting of purposefully selected sequences of human movement.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Dance">Wikipedia</a>
      </td>
    </tr>
    <tr>
      <td class="th">
        Gardening
      </td>
      <td>
        Gardening is the practice of growing and cultivating plants as part of horticulture.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Gardening">Wikipedia</a>
      </td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
}

td {
  border: 1px solid;
  padding: 4px 8px;
}

.th {
  font-weight: bold;
}

This makes it very hard for screen reader users to keep orientation, as they do not know in which column (Name? Description? Additional Resources?) and row (Playing Soccer? Dancing? Gardening?) they are. It's especially hard in the column "Additional Resources", where the cell's content does not offer any hint on what the Wikipedia link is about.

And while this is a very small table, you may imagine how hard it will be to browse a complex table, for example with lots of columns and rows with numerical data in it.

The bookmarklet "Contents Structured" applied to the table

Header cells for columns, but not for rows

The table in the following example indeed has a header cell for each column (the top row), but the data rows do not have one.

Generally bad table, with only horizontal headers

Show HTML code

Show CSS code

<table>
  <caption>My Hobbies</caption>
  <thead>
    <tr>
      <th>
        Name
      </th>
      <th>
        Description
      </th>
      <th>
        Additional Resources
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Playing Soccer
      </td>
      <td>
        Soccer is a team sport played between two teams of eleven players with a spherical ball.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Association_football">Wikipedia</a>
      </td>
    </tr>
    <tr>
      <td>
        Dancing
      </td>
      <td>
        Dance is a performing art form consisting of purposefully selected sequences of human movement.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Dance">Wikipedia</a>
      </td>
    </tr>
    <tr>
      <td class="th">
        Gardening
      </td>
      <td>
        Gardening is the practice of growing and cultivating plants as part of horticulture.
      </td>
      <td>
        <a href="https://en.wikipedia.org/wiki/Gardening">Wikipedia</a>
      </td>
    </tr>
  </tbody>
</table>

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid;
  padding: 4px 8px;
}

th {
  text-align: left;
}

This makes it hard to identify the current data row when navigating the table vertically.

You are here:

General bad table examples

No header cells

Header cells for columns, but not for rows

Previous/next navigation