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>, <colgroup> elements and before the <tfoot>, <tbody>, and <tr> elements. (You can use only one <thead> tag inside <table>).

Note that the <tfoot> tag must be placed before <tbody>, so that the browser can render the table footer correctly.

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.

HTML <thead> Tag

html

<table>
  <thead>
    <tr>
      <th> ... </th>
    </tr>
  </thead>
  <tfoot> ... </tfoot>
  <tbody> ... </tbody>
</table>

Example of the HTML `<thead>` tag:

HTML <thead> Tag

html

<!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>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Total</td>
          <td>1500</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <td>January</td>
          <td>500</td>
        </tr>
        <tr>
          <td>February</td>
          <td>1000</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

Result

thead example

Attributes

Attribute	Values	Description
align	right left center justify char	Specifies the alignment of the content inside a `<thead>` element. Not supported in HTML5
bgcolor	bgcolor	Sets the background color of the rows inside a `<thead>` element. Not supported in HTML5
char	character	Specifies the alignment of the content inside a `<thead>` element to a character. It is used only when the attribute is align="char". Not supported in HTML5.
charoff	number	Specifies the number of characters the content inside the `<thead>` element will be aligned from the character specified by the char attribute. It is used only when the attribute is align="char". Not supported in HTML5.
valign	top bottom middle baseline	Specifies a vertical alignment of the content inside a `<thead>` element. Not supported in HTML5.

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

How to style an HTML <thead> tag

css

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

Practice

What is the function of the HTML <thead> tag?

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 row in an HTML table.It is used to group the body content in an HTML table.It aids in improving accessibility by providing information about the structure of the table data.

HTML <thead> Tag ​

Syntax ​

Example of the HTML <thead> tag: ​

Result ​