REFERENCEhtml

html Documentation

📖 INDEX

# helloworld

LOADING ENGINE...

<thead>

AI & DATA SCIENCE // thead-tag

The <thead> element groups the header row(s) of a table, separating them semantically from the body and footer.

Syntax

<table>
  <thead>
    <tr><th>Name</th><th>Score</th></tr>
  </thead>
  <tbody>
    <tr><td>Alice</td><td>95</td></tr>
  </tbody>
</table>

Deep Dive Course

**`<thead>`** wraps the row(s) that act as the table's column headers, keeping them semantically distinct from `<tbody>` (the actual data rows) and `<tfoot>` (summary/footer rows). Beyond semantics, browsers use this grouping for print/scroll behavior — for example, when printing a long table across multiple pages, browsers can repeat the `<thead>` content at the top of each printed page automatically.

1Understanding <thead>

`<thead>` wraps the row(s) that act as the table's column headers, keeping them semantically distinct from <tbody> (the actual data rows) and <tfoot> (summary/footer rows). Beyond semantics, browsers use this grouping for print/scroll behavior — for example, when printing a long table across multiple pages, browsers can repeat the <thead> content at the top of each printed page automatically.

💡

A table only needs <thead>/<tbody>/<tfoot> when it's substantial enough to benefit from the grouping — a tiny 2x2 table can just use plain <tr> rows directly inside <table>.

editor.html

<table>
  <thead>
    <tr><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Widget</td><td>$9.99</td></tr>
    <tr><td>Gadget</td><td>$19.99</td></tr>
  </tbody>
</table>

localhost:3000

2Practical Example

Here is a real-world application of <thead> showing how it is used in production HTML.

editor.html

<!-- Long table: thead repeats on each printed page -->
<table>
  <thead><tr><th>Date</th><th>Amount</th></tr></thead>
  <tbody><!-- 200 rows of transactions --></tbody>
</table>

localhost:3000

3Best Practices

Follow these guidelines when working with <thead>:

1. Use <thead> to wrap header row(s) in tables with more than a trivial amount of data

2. Keep exactly the column headers in <thead> — actual data belongs in <tbody>

3. Combine with <tbody>/<tfoot> for a fully structured, print-friendly table

⚠️

Tip: A table only needs <thead>/<tbody>/<tfoot> when it's substantial enough to benefit from the grouping — a tiny 2x2 table can just use plain <tr> rows directly inside <table>.

editor.html

<table>
  <thead>
    <tr><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Widget</td><td>$9.99</td></tr>
    <tr><td>Gadget</td><td>$19.99</td></tr>
  </tbody>
</table>

localhost:3000

Examples

Example 01Basic Usage

<table>
  <thead>
    <tr><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Widget</td><td>$9.99</td></tr>
    <tr><td>Gadget</td><td>$19.99</td></tr>
  </tbody>
</table>

Example 02Advanced Example

<!-- Long table: thead repeats on each printed page -->
<table>
  <thead><tr><th>Date</th><th>Amount</th></tr></thead>
  <tbody><!-- 200 rows of transactions --></tbody>
</table>

Best Practices

Use to wrap header row(s) in tables with more than a trivial amount of data
Keep exactly the column headers in — actual data belongs in
Combine with / for a fully structured, print-friendly table

Interview Question

What practical browser behavior does <thead> enable beyond just semantic grouping?▼

Hint: Think about printing a long table that spans several pages.

Browsers can automatically repeat the <thead> row(s) at the top of every printed page when a long table's <tbody> content spans multiple pages, so readers don't lose track of which column is which partway through a printout. This only works because the header rows are explicitly grouped in <thead> rather than mixed in as plain <tr> rows.

Exercises

EasyPractice using <thead> in a real scenario.

View Solution

<table>
  <thead>
    <tr><th>Product</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Widget</td><td>$9.99</td></tr>
    <tr><td>Gadget</td><td>$19.99</td></tr>
  </tbody>
</table>

Frequently Asked Questions

What practical browser behavior does <thead> enable beyond just semantic grouping?▼

Browsers can automatically repeat the row(s) at the top of every printed page when a long table's content spans multiple pages, so readers don't lose track of which column is which partway through a printout. This only works because the header rows are explicitly grouped in rather than mixed in as plain rows.

Related Functions

tbody-tagtfoot-tagtable-tag