Path // www.yourhtmlsource.com → Reference → <THEAD> ELEMENT

<thead> element

by Ross Shannon

The <thead> element groups the header content in a table. It contains one or more <tr> elements that define the column headers. Using <thead> along with <tbody> and <tfoot> provides semantic structure to your tables and enables browsers to scroll the table body independently of the header and footer.

Clock This page was last updated on 2025-11-17


Syntax

The thead element wraps header rows and must appear after any caption or colgroup elements, but before tbody or tfoot:

<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

Key Attributes

The thead element has no specific attributes in modern HTML. The following obsolete attributes should be replaced with CSS:

  • align (obsolete) — Use CSS text-align instead
  • valign (obsolete) — Use CSS vertical-align instead
  • char (obsolete) — Character for alignment, rarely supported
  • charoff (obsolete) — Offset for character alignment

Modern styling example:

thead {
  background-color: #333;
  color: white;
  font-weight: bold;
}

Examples

Simple Table Header

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget</td>
      <td>$25.00</td>
      <td>100</td>
    </tr>
  </tbody>
</table>

Multi-Row Header

<table>
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th colspan="2">Contact Info</th>
    </tr>
    <tr>
      <th>Email</th>
      <th>Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice Johnson</td>
      <td>alice@example.com</td>
      <td>555-0101</td>
    </tr>
  </tbody>
</table>

Complete Table Structure

<table>
  <caption>Annual Budget</caption>
  <thead>
    <tr>
      <th scope="col">Category</th>
      <th scope="col">Budget</th>
      <th scope="col">Spent</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th scope="row">Total</th>
      <td>$50,000</td>
      <td>$42,500</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Marketing</td>
      <td>$20,000</td>
      <td>$18,500</td>
    </tr>
    <tr>
      <td>Operations</td>
      <td>$30,000</td>
      <td>$24,000</td>
    </tr>
  </tbody>
</table>

When to Use

Use thead for:

  • Any table with clearly defined column headers
  • Tables that will be printed (headers can repeat on each page)
  • Long scrollable tables where headers should remain visible
  • Improving table semantics and accessibility

Benefits of using thead:

  • Screen readers can repeat headers for each row, improving comprehension
  • Browsers can render tbody independently, enabling fixed headers while scrolling
  • When printing, headers can repeat on each page
  • CSS can target header rows specifically
  • JavaScript can easily access and manipulate header content

Note: A table can only have one <thead> element, but it can contain multiple rows.