HTML <thead> Tag

What You’ll Learn

The <thead> tag groups header rows in a table. This guide covers syntax, th cells, thead/tbody/tfoot structure, multi-level headers, CSS styling, accessibility, and best practices for beginners.

What Is the <thead> Tag?

The <thead> tag is an HTML element used inside <table> to define the header section of a table. It groups one or more tr rows that contain th header cells, separating column labels from data in tbody.

If you omit thead, browsers may still render header rows, but writing thead explicitly improves semantics, styling, and accessibility.

📝 Syntax

Place thead inside table with tr rows containing th cells:

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <!-- Data rows with td cells -->
  </tbody>
</table>

Full Table Example

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

Syntax Rules

• thead must be a direct child of table (along with caption, colgroup, tbody, and tfoot).
• Only tr elements go directly inside thead.
• Place thead before tbody and tfoot in source order.
• Use th (not td) for header cells inside thead.
• A table may contain at most one thead element.

⚖️ <thead>, <tbody>, and <tfoot>

⚖️ <thead> vs <th>

Examples Gallery

Basic header sections, merged header cells, and multi-level header layouts with copy-ready code and live previews.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

<thead>
  <tr>
    <th colspan="2">Merged Header</th>
    <th rowspan="2">Spanned Header</th>
  </tr>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
</thead>

<thead>
  <tr>
    <th colspan="2">Personal Information</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
</thead>

♿ Accessibility

• Use thead on data tables — Group column headers so assistive tech recognizes the header section.
• Use th inside thead — Header cells should be th, not td, for correct semantics.
• Add scope on th — Use scope="col" or scope="colgroup" for multi-level headers.
• Pair with tbody — Data rows in tbody are associated with headers in thead.
• Add a caption — A caption describes the table before users read individual headers.

💡 Best Practices