KPC
Kevin Powell - Community•2w ago
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>
<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)
5 Replies
Chris Bolson
Chris Bolson•2w ago
th = table header td = table data So, a th is used for indicating what the column (or row) cells contain. The "scope" indicates to the screen reader if the th is a column or a row (or a group of columns or rows) which allows it to read them out as such. More (better) info can be found on MDN
MDN Web Docs
HTML table accessibility - Learn web development | MDN
In the previous article, we looked at one of the most important features for making HTML tables accessible to visually impaired users — the <th> element. In this article, we continue down this path, looking at more HTML table accessibility features such as captions/summaries, grouping your rows into table head, body and footer sections, and sc...
Faker
FakerOP•2w ago
hmm the thing is, here for example scope is only needed for the header, Product, Price and stock, no? Why also include it for row?
Jochem
Jochem•2w ago
I'd argue that it's only needed for the rows. The ones in the first row are in a TR with only TH tags, which implies heavily that those headings will apply to the column they are a part of. The values in the first column of subsequent rows provide a definition of what the data in the columns next to them are for. There's also a heavy implication they are row headers from their position as the first cell TH in a row with just TDs in the rest of the fields though, but it's a less common use
Faker
FakerOP•2w ago
ah ok I see, the thing is when we use scope on the column headers, we are only associating this entire column to the scope. When we also associate scope on rows, this mean entire row is associated based on a value from the columns? Like: 
<table>
  <thead>
    <tr>
      <th></th>
      <th scope="col">Math</th>
      <th scope="col">English</th>
      <th scope="col">Science</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alice</th>
      <td>90</td>
      <td>85</td>
      <td>92</td>
    </tr>
    <tr>
      <th scope="row">Bob</th>
      <td>88</td>
      <td>90</td>
      <td>86</td>
    </tr>
  </tbody>
</table>
<table>
  <thead>
    <tr>
      <th></th>
      <th scope="col">Math</th>
      <th scope="col">English</th>
      <th scope="col">Science</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alice</th>
      <td>90</td>
      <td>85</td>
      <td>92</td>
    </tr>
    <tr>
      <th scope="row">Bob</th>
      <td>88</td>
      <td>90</td>
      <td>86</td>
    </tr>
  </tbody>
</table>
Screen reader for cell 85 might say: Alice, English, 85 ?
Jochem
Jochem•2w ago
no idea what a screenreader might say, but by putting scope="row" on the th in the row, you're saying the fields to the right apply to the value in the TH, so to Alice in your example

Did you find this page helpful?