Skip to content
html.sh

<thead> - Table Header Group Element

The <thead> Element

Section titled “The <thead> Element”
Table Element

The <thead> element defines a set of rows that represent the header of a table. It groups together one or more <tr> elements that contain <th> (header) cells, providing semantic meaning to the table structure. The <thead> helps browsers, screen readers, and other tools understand which rows contain column labels.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<table>
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <!-- data rows -->
  </tbody>
</table>

Element Order

Section titled “Element Order”

The <thead> element should appear in this order within a <table>:

  1. <caption> (optional, but recommended)
  2. <colgroup> (optional)
  3. <thead> (optional)
  4. <tbody> (one or more)
  5. <tfoot> (optional)

Attributes

Section titled “Attributes”

Global Attributes

Section titled “Global Attributes”

The <thead> element supports all global HTML attributes.

Deprecated Attributes

Section titled “Deprecated Attributes”

Common Use Cases

Section titled “Common Use Cases”

Data Table with Headers

Section titled “Data Table with Headers”
Result

Multi-Row Header

Section titled “Multi-Row Header”
Result

Financial Table

Section titled “Financial Table”
Result

Benefits of Using <thead>

Section titled “Benefits of Using <thead>”

Accessibility

Screen readers announce header cells differently, helping users navigate and understand table structure.

Printing

When printing long tables across multiple pages, browsers can repeat <thead> on each page.

Styling

Apply styles to all header rows at once with a single CSS selector.

Fixed Headers

Easily create sticky headers that remain visible while scrolling with position: sticky.

Semantic Structure

Clearly separates header content from data content, improving code maintainability.

JavaScript Selection

Easier to target and manipulate header rows with JavaScript using semantic selectors.

Styling with CSS

Section titled “Styling with CSS”

Basic Header Styling

Section titled “Basic Header Styling”
Result

Gradient Header

Section titled “Gradient Header”
Result

Fixed (Sticky) Header

Section titled “Fixed (Sticky) Header”
Result

Accessibility Best Practices

Section titled “Accessibility Best Practices”

Use scope Attribute

Section titled “Use scope Attribute”

Always add the scope attribute to <th> elements in the <thead>:

<thead>
  <tr>
    <th scope="col">Column 1</th>
    <th scope="col">Column 2</th>
    <th scope="col">Column 3</th>
  </tr>
</thead>

Complex Headers

Section titled “Complex Headers”

For multi-row headers, use rowspan and colspan with appropriate scope values:

<thead>
  <tr>
    <th scope="col" rowspan="2">Product</th>
    <th scope="colgroup" colspan="2">Pricing</th>
  </tr>
  <tr>
    <th scope="col">Regular</th>
    <th scope="col">Sale</th>
  </tr>
</thead>

Screen Reader Announcement

Section titled “Screen Reader Announcement”

When structured properly, screen readers will announce:

  • “Column header: Product Name”
  • “Column header: Price”

This helps users understand the table structure before navigating the data.

Common Patterns

Section titled “Common Patterns”

Sortable Headers

Section titled “Sortable Headers”
Result

Grouped Column Headers

Section titled “Grouped Column Headers”
Result

CSS Styling Reference

Section titled “CSS Styling Reference”
/* Basic thead styling */
thead {
  background-color: #333;
  color: white;
  font-weight: bold;
}


/* Gradient header */
thead {
  background: linear-gradient(to right, #667eea, #764ba2);
  color: white;
}


/* Fixed/sticky header */
thead {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


/* Header hover effect */
thead th:hover {
  background-color: #555;
  cursor: pointer;
}


/* Multi-row header differentiation */
thead tr:first-child {
  background-color: #2c3e50;
}


thead tr:last-child {
  background-color: #34495e;
}
Section titled “Print Behavior”

When tables span multiple pages during printing, the <thead> can automatically repeat on each page:

@media print {
  thead {
    display: table-header-group;
  }


  tbody {
    display: table-row-group;
  }


  tfoot {
    display: table-footer-group;
  }
}

Best Practices

Section titled “Best Practices”

Do’s

Section titled “Do’s”
  • ✅ Always use <thead> for table headers
  • ✅ Add scope attributes to all <th> elements
  • ✅ Use semantic structure with <thead>, <tbody>, <tfoot>
  • ✅ Keep headers descriptive but concise
  • ✅ Use only <th> elements in <thead> (not <td>)
  • ✅ Style consistently across your application

Don’ts

Section titled “Don’ts”
  • ❌ Don’t use <td> in headers - use <th> instead
  • ❌ Don’t skip <thead> even for simple tables
  • ❌ Don’t forget scope attributes for accessibility
  • ❌ Don’t make headers too wide - keep them scannable
  • ❌ Don’t use deprecated attributes - use CSS instead

Browser Support

Section titled “Browser Support”

The <thead> element is supported in all browsers:

  • ✅ Chrome (all versions)
  • ✅ Firefox (all versions)
  • ✅ Safari (all versions)
  • ✅ Edge (all versions)
  • ✅ Opera (all versions)
  • ✅ Internet Explorer (all versions)
Section titled “Related Elements”

Specifications

Section titled “Specifications”