HTML <th> element

The <th> element defines a header cell in a table — a cell that labels a row or column, rather than holding one of the row's own data values.

The scope attribute identifies the cells a heading labels: col for a column and row for a row. The values colgroup and rowgroup refer to the corresponding column or row group and require the header to be anchored in that group. They do not merge cells; colspan and rowspan control how much of the grid a cell occupies.

Visually, browsers give <th> bold, centred text by default, but that styling is incidental. The real difference from <td> is semantic: a <th> labels data, a <td> holds it. Making a cell bold with CSS does not make it a header, and using <th> purely for its bold default is using the wrong element for a styling effect.

A <th> must appear inside <tr>, including when it is in <thead>. Header cells can also label rows in <tbody> or totals in <tfoot>. The example shows both column and row headings.

The headers attribute can associate a header cell with other header cells by listing their IDs, separated by spaces. The abbr attribute supplies an alternative label, usually shorter, for use when software refers to that heading. Neither attribute changes the visible heading text.

Attributes: scope, colspan, rowspan, headers, abbr, GLOBALS.

Typical layout:
<table>
  <caption>Workshop prices</caption>
  <thead>
    <tr>
      <th scope="col">Workshop</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Flex</th>
      <td>€6</td>
    </tr>
  </tbody>
</table>

Visual representation: