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?