5 replies

How does scope attribute works in HTML table?

Hello, I was reading a bit about the

scope

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>

<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

row

but we use

th

th

instead of

td

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)

KP-C

Kevin Powell - Community•11mo ago•

5 replies

Faker

How does scope attribute works in HTML table?

Hello, I was reading a bit about the

scope

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>

<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

row

but we use

th

th

instead of

td

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)

How does scope attribute works in HTML table?

Similar Threads

How does scope attribute works in HTML table?

Similar Threads

Similar Threads

Similar Threads