HTML <thead> Tag

The HTML <thead> tag represents the headers within an HTML table. This is the block of rows that consist of the column labels for the parent <table> element.

The <thead> tag can be used with the <tbody> tag and the <tfoot> tag in determining each part of the table (header, footer, body). Browsers can use this information to enable scrolling of the table body independently of the header and footer - particuarly useful for large tables. Also, when printing a large table that spans multiple pages, this information can enable the table header and footer to be printed at the top and bottom of each page.


The <thead> tag is written as <thead></thead> with the table header inserted between the start and end tags.

The <thead> tag can contain zero or more <tr> elements and script-supporting elements (<script>, <template>).

Like this:

Note: If you use the <thead> tag, it must be used in the following context:

  • As a child of a <table> element, after any <caption>, and <colgroup> elements and before any <tbody>, <tfoot>, and <tr> elements, but only if there are no other <thead> elements that are children of the <table> element.
  • The <thead> tag can contain zero or more <tr> elements and script supporting elements.


In this example, a table uses the <thead> element. The CSS background-color property has been used to change the background color of the <thead> element.


Attributes can be added to an HTML element to provide more information about how the element should appear or behave.

There are 3 kinds of attributes that you can add to your HTML tags: Element-specific, global, and event handler content attributes.

The <thead> element accepts the following attributes.

Element-Specific Attributes

This table shows the attributes that are specific to the <thead> tag/element.


Global Attributes

The following attributes are standard across all HTML5 elements. Therefore, you can use these attributes with the <thead> tag , as well as with all other HTML tags.

For a full explanation of these attributes, see HTML 5 global attributes.

Event Handler Content Attributes

Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.

Below are the standard HTML5 event handler content attributes.

Again, you can use any of these with the <thead> element, as well as any other HTML5 element.

For a full explanation of these attributes, see HTML 5 event handler content attributes.

Differences Between HTML 4 & HTML 5

HTML5 does not support the following attributes, which were supported in HTML 4:

To see more detail on the two versions see HTML5 <thead> Tag and HTML4 <thead> Tag. Also check out the links to the official specifications below.


Here's a template for the <thead> tag with all available attributes for the tag (based on HTML5). These are grouped into attribute types, each type separated by a space. In many cases, you will probably only need one or two (if any) attributes. Simply remove the attributes you don't need.

For more information on attributes for this tag, see HTML5 <thead> Tag and HTML4 <thead> Tag.

Tag Details

For more details about the <thead> tag, see HTML5 <thead> Tag and HTML4 <thead> Tag.


Here are the official specifications for the <thead> element.

What's the Difference?

W3C creates "snapshot" specifications that don't change once defined. So the HTML5 specification won't change once it becomes an official recommendation. WHATWG on the other hand, develops a "living standard" that is updated on a regular basis. In general, you will probably find that the HTML living standard will be more closely aligned to the current W3C draft than to the HTML5 specification.