<headers> cells attribute in <table> element, refer to an element ID – but it is not found in the same table

2 min read

If there is a table with more than one header for a column, Lighthouse finds and reports it with a detailed scan operation.

<headers> cells attribute

How can data cells with no header match be corrected?

Note that each data cell found must be a table header cell aligned.

For example, the table below is problematic:

<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>

Here are what you have to do to fix this coding: 

  1. Remove headers = '' Week '' from this table.
  2. Add "Scope".
  3. Add the <td> code snippet in first row too

Here the correct version of the coding:

<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>

Test Your Website Issues

You can quickly analyze your site