HTML - Table headers & scope

This describes how to properly create accessible tables with scoped TH cells.

Using this raw table as an example (poor accessibility since no header cells are specified)


<table>
  <thead>
    <tr>
      <td>Col 0, Row 0</td>
      <td>Col 1</td>
      <td>Col 2</td>
      <td>Col 3</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
      <td>123</td>
      <td>345</td>
      <td>567</td>
    </tr>
    <tr>
      <td>Row 2</td>
      <td>123</td>
      <td>345</td>
      <td>567</td>
    </tr>
  </tbody>
</table>

Col 0, Row 0 Col 1 Col 2 Col 3
Row 1 123 345 567
Row 2 123 345 567

The cells Col 0/1/2/3 and Row 1/2 should all be defined as header cells (i.e., change them from <td> to <th>) to show that they're labels for rows and columns:

<table>
  <thead>
    <tr>
      <th>Col 0, Row 0</th>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>123</td>
      <td>345</td>
      <td>567</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>123</td>
      <td>345</td>
      <td>567</td>
    </tr>
  </tbody>
</table>


Col 0, Row 0 Col 1 Col 2 Col 3
Row 1 123 345 567
Row 2 123 345 567

However there's ambiguity since "Col 0, Row 0" could refer to either the row or the column it's in.  (And actually, any of the TH cells could refer to a col or row in complex cases) Adding scope="col" or scope="row" fixes that by specifying what each describes:

<table>
  <thead>
    <tr>
      <th scope="row">Row 0</th>
      <th scope="col">Col 1</th>
      <th scope="col">Col 2</th>
      <th scope="col">Col 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row 1</th>
      <td>123</td>
      <td>345</td>
      <td>567</td>
    </tr>
    <tr>
      <th scope="row">Row 2</th>
      <td>123</td>
      <td>345</td>
      <td>567</td>
    </tr>
  </tbody>
</table>

Row 0 Col 1 Col 2 Col 3
Row 1 123 345 567
Row 2 123 345 567




Keywords:table headers cols rows scope columns in HTML   Doc ID:78357
Owner:Jeffrey K.Group:Law School
Created:2017-11-21 11:58 CDTUpdated:2022-05-26 15:07 CDT
Sites:Law School
Feedback:  2   1