td headers

You should set one table header per column to help assistive technologies.

Accessibility

Correct use of headers attribute in a table

Some users use assistive technologies and screen readers to be able to navigate a web page correctly. 

When these technologies scan the page and find a table, they inform the user about the headers of each cell, so it is important that the headers and data match.

Therefore, you should set one table header per column.

 

How the SeoChecker audit fails

When SeoChecker's audit detects more than one table header per column, it will notify it.

 

How can I fix data cells that refer to nonexistent headers?

Have a look at the table below:

<table>
  <caption><strong>My marathon training log</strong></caption>
  <thead>
    <tr>
      <th>Week</th>
      <th>Total miles</th>
      <th>Longest run</th>
      <th>Long run pace</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th headers="Week">1</th>
      <td>14</td>
      <td>5</td>
      <td>12.30</td>
    </tr>

    <tr>
      <th>1</th>
      <td>16</td>
      <td>6</td>
      <td>12.15</td>
    </tr>

  </tbody>

</table>

As you can see, there is one column with multiple table headers.

You need to fix it, so delete headers=”Week” and use instead the scope attribute to the header column and table rows: this attribute is able to communicate with both browser and assistive technologies, specifying that the components in the column are related to the header at the top; moreover, elements in the right of the row header are related to it.

In addition to that you should add the <td> to the first row in the body to align the data with the headers.

<table>
  <caption>My marathon training log</caption>
  <thead>
    <tr>
      <th scope="col">Week</th>
      <th scope="col">Total miles</th>
      <th scope="col">Longest run</th>
      <th scope="col">Long run pace</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>14</td>
      <td>5</td>
      <td>12.30</td>
    </tr>

    <tr>
      <th scope="row">1</th>
      <td>16</td>
      <td>6</td>
      <td>12.15</td>
    </tr>

  </tbody>

</table>

Share this Guide

Did you like it? Share it!

Share it!

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page