Français

<thead>

Defining headers, and the scope attribute almost nobody uses

— 2 min read

  • HTML
  • accessibility
  • semantics
  • tables

<thead> + <th> — Table headers

<thead> groups the header rows of a table. <th> declares a header cell — as opposed to <td> which is a data cell. The scope attribute specifies whether the header applies to a column (col), a row (row), a column group (colgroup), or a row group (rowgroup).

When to use it

Your table has column or row labels. Use <thead> for the first header row and <th scope="col"> for each column label. If your rows also have a header (first cell of each row), use <th scope="row">.

What you gain

Accessibility: without <th> and scope, a screen reader reads "12 000" with no idea it is Europe's Q1 revenue. With scope, it announces "Europe, Q1: 12 000". That is the difference between a grid of numbers and comprehensible information.

Code example

<table>
  <caption>Sprint velocity by team</caption>
  <thead>
    <tr>
      <th scope="col">Team</th>
      <th scope="col">Sprint 1</th>
      <th scope="col">Sprint 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Alpha</th>
      <td>42</td>
      <td>47</td>
    </tr>
    <tr>
      <th scope="row">Beta</th>
      <td>38</td>
      <td>41</td>
    </tr>
  </tbody>
</table>

Further reading