HTML / Element

How to Use the thead Element

The thead element groups rows that contain a table's column headings and other related cells. It marks the heading part as part of the table's structure.

The short answer

Put a table's column-heading rows inside thead. Use th for each heading cell.

thead groups rows; th is a heading cell. They have different jobs, so putting a cell in thead does not by itself make it a heading.

A small example

<table>
  <caption>Opening hours by day</caption>
  <thead>
    <tr>
      <th scope="col">Day</th>
      <th scope="col">Opening hours</th>
    </tr>
  </thead>
  <tbody>
    <tr><th scope="row">Monday</th><td>9 a.m.–5 p.m.</td></tr>
    <tr><th scope="row">Tuesday</th><td>9 a.m.–5 p.m.</td></tr>
  </tbody>
</table>

Opening hours by day
Day	Opening hours
Monday	9 a.m.–5 p.m.
Tuesday	9 a.m.–5 p.m.

Here, thead groups the row of column headings. The heading cells use th scope="col". The first cell in each body row also uses th, with scope="row". Each cell has its own meaning.

How are thead and th different?

thead groups rows in the heading part of a table.
th is a cell used as a row or column heading.
tbody groups rows in the main part of a table.

A th can appear inside tbody, too. For example, th scope="row" can mark the name at the start of each body row as its heading.

What if the table has no thead?

A table without a heading row does not need thead. You can also write a tr directly inside table. Even if that row contains th, the browser does not create a thead for it. When it reads the HTML, it normally adds a tbody around the row.

<table>
  <tr><th scope="col">Day</th></tr>
</table>

// Parent-child relationships in the DOM
table → tbody → tr → th

When JavaScript reads a table, check the DOM built by the browser as well as the HTML source.

Common mistakes

Thinking that thead turns its cells into headings. Use th for heading cells.
Thinking that bold text alone gives a cell heading meaning. CSS changes appearance; HTML describes the cell's meaning.
Thinking every table must have thead. Use it when the table has heading rows.

For grouping columns before the heading rows, see How to Use the colgroup Element.

For the whole table, see table.
For the main data rows, see tbody.
For total or summary rows, see tfoot.
For heading cells and table rows, see th and tr.
For a table title, see caption.
For thead rules and browser observations, see thead in Yugien Atlas.