HTML <thead> tag

Definition and Usage

<thead> tags are used to group the title content in an HTML table.

<thead> elements with </tbody> and </tfoot> elements used together to specify each part of the table (header, body, footer).

Browsers can use these elements to make the header and footer of the table independent when scrolling the table body. Moreover, when printing large tables that span multiple pages, these elements can make the header and footer of the table printed at the top and bottom of each page.

Note:<thead> element must contain one or more <tr> tag.

<thead> tags must be used in the following context: as a <table> child elements of the element, at any <caption> and <colgroup> after the element, as well as at any </tbody>,</tfoot> and <tr> before the element.

Tip:By default,<thead>elements, <tbody>, and <tfoot> will not affect the table layout. However, you can use CSS to set the styles of these elements (see the examples below)!

Instance

Example 1

HTML table containing <thead>, <tbody>, and <tfoot> elements:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try It Yourself

Example 2

Use CSS to set the styles of <thead>, <tbody>, and <tfoot>:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  </tfoot>
    <tr>
      <td>Total</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Try It Yourself

Example 3

How to align <thead> The content (using CSS):

<table style="width:100%">
  <thead style="text-align:left">
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  </tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Try It Yourself

Example 4

How to align vertically <thead> The content (using CSS):

<table style="width:50%;">
  <thead style="vertical-align:bottom">
    <tr style="height:100px">
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
   </tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>February</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Try It Yourself

Global Attributes

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

Event Attributes

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

Default CSS Settings

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

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

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support