HTML <thead> Tag

The <thead> tag defines the header of an HTML table. The tag is used along with <tbody> and <tfoot> tags, that specify the body and footer of the table, respectively.

The <thead> tag must be used as a child of the <table> element, after the <caption> and <colgroup> elements and before the <tbody>, <tfoot>, and <tr> elements. You can use only one <thead> tag inside a <table>.

In HTML5 the <tfoot> tag may be placed either before or after <tbody> — the browser renders the footer at the bottom of the table in both cases. (In the older HTML 4.01 specification <tfoot> had to come before <tbody>; that requirement was dropped in HTML5.)

Why the `<thead>` tag matters

Grouping the header rows in <thead> is not just about tidy markup. It gives the table real semantic structure that browsers and assistive technology can use:

Screen readers can identify and announce the header cells, helping users understand what each data cell means as they navigate the table.
Printing and long tables: when a table spans several printed pages (or scrolls inside a fixed-height container), browsers can repeat the <thead> rows at the top of each page or section, so the columns stay labelled.
Styling and scripting become easier: you can target thead in CSS or sort only the body rows in JavaScript without touching the header.

For the structure to be meaningful, put <th scope="col"> cells inside <thead> — see the Accessibility section below.

Danger

The <thead> must contain at least one <tr> element.

Tip

The <thead>, <tbody>, and <tfoot> elements do not affect the table layout by default. Use CSS properties to customize the look of the table.

Syntax

The <thead> tag comes in pairs. The content is written between the opening (<thead>) and closing (</thead>) tags.

<table>
  <thead>
    <tr>
      <th scope="col"> ... </th>
    </tr>
  </thead>
  <tbody> ... </tbody>
  <tfoot> ... </tfoot>
</table>

Example of the HTML `<thead>` tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 80%;
        margin: 30px auto;
        border-collapse: collapse;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th,
      td {
        padding: 10px;
        border: 1px solid #666666;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th scope="col">Month</th>
          <th scope="col">Savings</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

Try it Yourself »

Accessibility

The <thead> tag mainly earns its value through accessibility. To get the full benefit, use <th> (not <td>) inside it and add the scope attribute:

<thead>
  <tr>
    <th scope="col">Month</th>
    <th scope="col">Savings</th>
  </tr>
</thead>

scope="col" tells screen readers that the cell is the header for the whole column. As the user moves down the column, the assistive technology can announce the header before each data cell, so the relationship between a value (for example, 500) and its label (Savings) is never lost. For a header that labels a row instead of a column, use scope="row". See the <th> tag for more on header cells and scopes.

Keep the actual column titles in <thead> and keep summary or running-total rows in <tfoot>; this consistent structure is what lets screen readers, print stylesheets, and scripts treat the header correctly.

Attributes

All of the attributes below are deprecated and not supported in HTML5. They are listed here only so you can recognize them in legacy markup. Use CSS instead — see Replacing the deprecated attributes with CSS.

Attribute	Values	Description
align	`left`, `right`, `center`, `justify`, `char`	Horizontal alignment of the content inside a `<thead>`. Not supported in HTML5.
bgcolor	`color` (name or hex)	Background color of the rows inside a `<thead>`. Not supported in HTML5.
char	`character`	Aligns the content to a character; used only with `align="char"`. Not supported in HTML5.
charoff	`number`	Offset (in characters) from the character set by `char`; used only with `align="char"`. Not supported in HTML5.
valign	`top`, `bottom`, `middle`, `baseline`	Vertical alignment of the content inside a `<thead>`. Not supported in HTML5.

The <thead> tag also supports the Global Attributes and the Event Attributes.

Replacing the deprecated attributes with CSS

Each presentational attribute above has a direct CSS equivalent that you should use instead:

Old attribute	CSS replacement
`align="center"`	`text-align: center;`
`valign="middle"`	`vertical-align: middle;`
`bgcolor="#f2f2f2"`	`background-color: #f2f2f2;`
`char` / `charoff`	No CSS equivalent; align numbers with `text-align` or padding.

A typical styled header looks like this:

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

thead th {
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

For more table styling options, see CSS Tables.

Practice

What is the function of the HTML thead tag? (Select all that apply)

It is used to group the footer content in an HTML table.It is used to group the header content in an HTML table.It is used to define a single row in an HTML table.It is used to group the body content in an HTML table.It aids accessibility by describing the structure of the table data to assistive technology.

Why the <thead> tag matters