HTML <thead> Tag

Topic: HTML5 Tags Reference« Prev|Next »

Description

The <thead> (short for table head) element defines a table's header. It is used to group a set of rows defining the header of the columns within the table.

This element must appears as a child of a <table> element, after any <caption> and <colgroup> elements, but before any <tbody>, <tfoot> and <tr> element. The <thead> tag must contain at least one row, defined by the <tr> tag.

The following table summarizes the usages context and the version history of this tag.

Parent: <table>
Content: <tr>
Start/End Tag: Start tag: required, End tag: required
Version: HTML 4, 4.01, 5

Usage Notes

  • Table rows may be grouped into a table head, table foot, and one or more table body sections, using the <thead>, <tfoot> and <tbody> tags, respectively.

  • This division enables the browser to support scrolling of table bodies independently of the table head and foot sections. Also, when long tables are printed that spans multiple pages, the table head and foot information may be printed on each page that contains table data.

  • When present, each <thead>, <tfoot> and <tbody> contains a row group. Each row group must contain at least one row, defined by the <tr> tag.


Syntax

The basic syntax of the <thead> tag is given with:

HTML / XHTML: <thead> ... </thead>

The example below shows the <thead> tag in action.

  • <table>
  •     <thead>
  •         <tr>
  •             <th>No.</th>
  •             <th>Name</th>
  •             <th>Email</th>
  •         </tr>
  •     </thead>
  •     <tbody>
  •         <tr>
  •             <td>1</td>
  •             <td>John Carter</td>
  •             <td>johncarter@mail.com</td>
  •         </tr>
  •         <tr>
  •             <td>2</td>
  •             <td>Peter Parker</td>
  •             <td>peterparker@mail.com</td>
  •         </tr>
  •         <tr>
  •             <td>3</td>
  •             <td>John Rambo</td>
  •             <td>johnrambo@mail.com</td>
  •         </tr>
  •     </tbody>
  • </table>

Tag-Specific Attributes

The following table shows the attributes that are specific to the <thead> tag.

Attribute Value Description
align left
right
center
justify
char
Obsolete Specifies the horizontal alignment of each cell content inside the table header.
char character Obsolete Sets the character to which cell contents of the table header should align.
charoff number Obsolete Defines the number of characters by which cell contents of the table header will be offset from the alignment characters specified by the char attribute.
valign top
middle
bottom
baseline
Obsolete Specifies the vertical alignment of the text within each row of cells of the table header.

Global Attributes

Like all other HTML tags, the <thead> tag supports the global attributes in HTML5.


Event Attributes

The <thead> tag also supports the event attributes in HTML5.


Browser Compatibility

The <thead> tag is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 2+
  • Apple Safari 1+
  • Opera 4+

Further Reading

See tutorial on: HTML Tables.

Other table-related tags: <table>, <tfoot>, <tbody>, <caption>, <colgroup>, <col>, <tr>, <th>, <td>.

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.