HTML <thead> element

The <thead> element groups the header rows of a table. It usually contains rows that explain what the columns mean.

Inside <thead>, the rows are written with <tr> elements. Those rows normally contain <th> cells, because the cells are usually column headings.

A <table> can have at most one <thead>, containing as many header rows as needed. Place it after any caption and column groups, and before <tbody> and <tfoot>.

In a long table, this structure can help browsers, tools, and stylesheets treat the header rows differently from the data rows. For example, the header can be styled separately from the body.

Grouping a row in <thead> does not turn its cells into headers. Use <th> for the header cells and give them an appropriate scope. Row headings can also occur in the table body.

The example below separates the column headings from the data row. The row group provides structure; CSS controls its background, borders, and other visual treatment.

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