<headers> cells attribute in <table> element, refer to an element ID – but it is not found in the same table
If there is a table with more than one header for a column, Lighthouse finds and reports it with a detailed scan operation.
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:
- Remove
headers = '' Week ''
from this table. - Add
"Scope"
. - 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