<thead>

<thead> groups one or more heading rows in a table. It describes a row group; th defines the header cells inside those rows.

Separate headings from data

The example puts column headings in <thead> and workshop rows in <tbody>. Styling <thead> lets you give all heading rows a consistent appearance.

<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>

/* 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;
}

Placement and behavior

Use at most one <thead>, after any caption and column groups and before body rows. Its children are <tr> elements. A table can have multiple heading rows when the data needs them; use appropriate scopes or explicit associations for complex spanning headers.

Browsers may repeat header rows when printing a long table. Test print output rather than promising identical pagination in every browser. <thead> does not create sticky headers automatically; that requires CSS and careful testing.

Common mistake

A <td> inside <thead> is still a data cell. The row group alone does not give every cell column-header semantics. Conversely, row headers inside <tbody> are valid and useful. Try moving a workshop name into <th scope="row"> if it began as a data cell.

Sources and browser support

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