<th>

<th> is a header cell inside a table row. It describes other cells. Column headers often appear in <thead>; row headers belong beside their data in <tbody> and can also appear in <tfoot>.

Row and column headers

The first row uses scope="col". Each workshop name and the total use scope="row". Bold text is the browser’s usual presentation, not what creates these relationships.

Read th in a complete tableLink

HTML and CSS

HTML

<table>
  <caption>
    Workshop registrations
  </caption>
  <thead>
    <tr>
      <th scope="col">Workshop</th>
      <th scope="col">Places booked</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">HTML basics</th>
      <td class="amount">12</td>
    </tr>
    <tr>
      <th scope="row">CSS layout</th>
      <td class="amount">8</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td class="amount">20</td>
    </tr>
  </tfoot>
</table>

CSS

/* Presentation: these styles make the table easier to read. */
table {
  border-collapse: collapse;
}
caption {
  text-align: left;
  font-weight: bold;
  margin-bottom: 0.5rem;
}
th,
td {
  border: 1px solid #94a3b8;
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.

Attributes that matter

scope can be row, col, rowgroup, or colgroup; choose the relationship the table actually has. colspan and rowspan let a cell occupy multiple columns or rows. They do not fill missing header relationships automatically. abbr supplies a shorter header label for situations where user agents use it.

For complex tables, give header cells IDs and list those IDs in data cells’ headers attributes. Test the resulting reading order with the assistive technology you support. A smaller, simpler table may avoid that complexity.

Common mistakes

Do not choose <th> only to get bold text, and do not write all cells as <td> and hope <thead> makes the first row accessible headers. <th> is valid in any row group; it is not restricted to <thead>. Remove the presentation CSS in the example: the header relationships still exist.

Sources and browser support

MDN: th describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.