Kevin Powell - CommunityKP-C
Kevin Powell - Community•9mo ago•
5 replies
Faker

How does scope attribute works in HTML table?

Hello, I was reading a bit about the scope attribute in HTML table. From what I've understood, it "associates" a table header to a column, like:
<table border="1">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Price</th>
      <th scope="col">Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Pen</th>
      <td>$1</td>
      <td>100</td>
    </tr>
    <tr>
      <th scope="row">Notebook</th>
      <td>$2</td>
      <td>200</td>
    </tr>
  </tbody>
</table>


I don't understand, for the first cell of a row, we associate it with attribute row but we use th instead of td.

Can someone explain how does it work please, like what the screen reader does? (I don't really understand where to use scope=row or scope=col, just I know scope=col is for header cells)
Was this page helpful?