To fix the problem, ensure that each cell in a table using headers refers to another cell in the same table by creating a scope attribute value on each th element within tr elements. This rule checks that references to header columns and rows connect to specific td elements.
The scope attribute tells the browser and screen reader that everything under the column is related to the header at the top, and everything to the right of the row header is related to that header.
Applying the scope attribute to our table the markup now looks like this:
| ID | First Name | Last Name | Profession |
| 1. | John | Doe | Entrepreneur |
| 2. | Shane | Tripp | Writer |
| 3. | Groot | Will | Web Designer |
| 4. | Jemma | Kindle | Robot |
Example Code
<table>
<tbody>
<tr>
<td><strong>ID</strong></td>
<td><strong>First Name</strong></td>
<td><strong>Last Name</strong></td>
<td><strong>Profession</strong></td>
</tr>
<tr>
<td>1.</td>
<td>John</td>
<td>Doe</td>
<td>Entrepreneur</td>
</tr>
<tr>
<td>2.</td>
<td>Shane</td>
<td>Tripp</td>
<td>Writer</td>
</tr>
<tr>
<td>3.</td>
<td>Groot</td>
<td>Will</td>
<td>Web Designer</td>
</tr>
<tr>
<td>4.</td>
<td>Jemma</td>
<td>Kindle</td>
<td>Robot</td>
</tr>
</tbody>
</table>Learn more https://web.dev/learn/html/tables