<thead>

Groups the header content in a table

Definition and Usage

The <thead> tag is used to group header content in an HTML table.

The <thead> element is used in conjunction with the <tbody> and <tfoot> elements to specify each part of a table (header, body, footer).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

Note: The <thead> element must have one or more <tr> tags inside.

Tip: The <thead>, <tbody>, and <tfoot> elements will not affect the layout of the table by default. However, you can use CSS to style these elements.

Browser Support

The <thead> tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Attributes

The <thead> tag supports the Global Attributes in HTML.

The <thead> tag also supports the Event Attributes in HTML.

Deprecated Attributes

The following attributes are deprecated in HTML5 and should not be used. Use CSS instead:

Attribute	Value	Description
Deprecated align	left right center justify char	Deprecated in HTML5 specifications. Use CSS instead. Specifies the horizontal alignment
Deprecated char	character	Deprecated in HTML5 specifications. Specifies the alignment of content to a character
Deprecated charoff	number	Deprecated in HTML5 specifications. Specifies the number of characters the content will be aligned from the character specified by the char attribute
Deprecated valign	top middle bottom baseline	Deprecated in HTML5 specifications. Use CSS instead. Specifies the vertical alignment

Examples

Basic Table with thead

Create a table with a distinct header section:

Example
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$999</td>
      <td>5</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>$29</td>
      <td>15</td>
    </tr>
  </tbody>
</table>

Sticky Table Header with CSS

Create a sticky header that remains visible while scrolling:

Example
<style>
  .sticky-table {
    max-height: 300px;
    overflow-y: auto;
    display: block;
  }

  .sticky-table thead {
    position: sticky;
    top: 0;
    background-color: #745af2;
    color: white;
    z-index: 1;
  }

  .sticky-table th {
    padding: 12px;
  }

  .sticky-table td {
    padding: 12px;
  }
</style>

<table class="sticky-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john@example.com</td>
      <td>Active</td>
    </tr>
    <!-- More rows... -->
  </tbody>
</table>

Styled thead with CSS

Apply custom styling to the table header:

Example
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }

  thead th {
    padding: 15px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
  }

  tbody tr:nth-child(even) {
    background-color: #f8f9fa;
  }

  tbody td {
    padding: 12px 15px;
    border-bottom: 1px solid #dee2e6;
  }
</style>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Customer</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>001</td>
      <td>Alice Johnson</td>
      <td>$1,234</td>
    </tr>
    <tr>
      <td>002</td>
      <td>Bob Smith</td>
      <td>$567</td>
    </tr>
  </tbody>
</table>

Table with Colspan in thead

Use colspan to create multi-level headers:

Example
<table>
  <thead>
    <tr>
      <th rowspan="2">Product</th>
      <th colspan="2">Sales</th>
    </tr>
    <tr>
      <th>Q1</th>
      <th>Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>150</td>
      <td>200</td>
    </tr>
    <tr>
      <td>Phone</td>
      <td>300</td>
      <td>350</td>
    </tr>
  </tbody>
</table>

Complete Table Structure

Use thead, tbody, and tfoot together:

Example
<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Widget A</td>
      <td>10</td>
      <td>$50.00</td>
    </tr>
    <tr>
      <td>Widget B</td>
      <td>5</td>
      <td>$75.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Total</th>
      <th>$125.00</th>
    </tr>
  </tfoot>
</table>

Sortable Table Headers

Add interactive sorting functionality:

Example
<style>
  thead th {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 30px;
  }

  thead th::after {
    content: '⇅';
    position: absolute;
    right: 10px;
    opacity: 0.3;
  }

  thead th:hover::after {
    opacity: 1;
  }
</style>

<table id="sortableTable">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Name</th>
      <th onclick="sortTable(1)">Age</th>
      <th onclick="sortTable(2)">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>25</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

Try it Yourself

Interactive Example

Here's a live example of a table with a styled thead:

Employee	Department	Salary
Sarah Johnson	Engineering	$95,000
Mike Chen	Marketing	$75,000
Emily Davis	Sales	$82,000

🚀 Try in Code Playground

Table Structure: thead, tbody, and tfoot

HTML provides three elements to structure table content:

Element	Purpose	Usage
<thead>	Groups header content	Contains column headers, typically `<th>` elements
<tbody>	Groups body content	Contains the main data rows of the table
<tfoot>	Groups footer content	Contains summary rows like totals or notes

Note: In HTML5, <tfoot> can be placed before or after <tbody>, but it will always be rendered at the bottom of the table.

Sticky Headers with CSS

Create fixed headers that remain visible while scrolling:

CSS for Sticky Headers
/* Sticky header for scrollable tables */
.table-container {
  max-height: 400px;
  overflow-y: auto;
  position: relative;
}

thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--bg-primary);
}

/* Optional: Add shadow for better visibility */
thead::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

Accessibility Benefits

Using <thead> provides several accessibility advantages:

Screen Readers: Helps screen readers identify and announce table headers separately from data
Navigation: Users can navigate between table sections more easily
Context: Provides semantic context about the table structure
Print Layout: Browsers can repeat headers on each printed page for long tables
Scrolling: Enables independent scrolling of body content while keeping headers visible

Accessibility Tip: Always use <thead> with <th> elements that have the scope attribute for maximum accessibility.

Best Practices

Always use <thead> together with <tbody> for better table structure
Place <th> elements with scope="col" inside <thead>
Use only one <thead> per table
Include at least one <tr> inside <thead>
Use CSS to style <thead> instead of deprecated HTML attributes
Consider using sticky positioning for long scrollable tables
Ensure headers are descriptive and concise
Use <tfoot> for summary rows or totals
Maintain consistent semantic structure across all tables in your site

Default CSS Settings

Most browsers will display the <thead> element with the following default values:

Default CSS
thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

Related Tags

<table>
Defines a table
<tbody>
Groups table body content
<tfoot>
Groups table footer content
<tr>
Defines a table row
<th>
Defines a table header cell
<td>
Defines a table data cell