thead element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The thead element contains a block of rows (tr) representing the header section of a table, where header cells (th) can usually be found. This element can be useful to specify which rows are supposed to provide header information for the rest of the table. Nevertheless, it's not required for header cells to belong in a header section and thay can be declared quite directly inside the table element.

The thead element can only be present once in the table and must take place right before its body.

In previous versions of the standard, the thead element had several presentational attributes that have been removed in the HTML5 specification. Authors should drop their use in favor of style sheets.

Examples

In the following example we'll declare a table with a thead section, containing a row of header cells (th). These header cells will provide a title for each cell in the column. Regular cells will be contained in a tbody section.

<table class="egt">
  <thead>
    <tr>
      <th>Book</th>
      <th>Author</th>
      <th>Published</th>
      <th>Sales (in millions)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A tale of two cities</td>
      <td>Charles Dickens</td>
      <td>1859</td>
      <td>200</td>
    </tr>
    <tr>
      <td>The lord of the rings</td>
      <td>J. R. R. Tolkien</td>
      <td>1954-1955</td>
      <td>150</td>
    </tr>
    <tr>
      <td>The little prince</td>
      <td>Antoine de Saint-Exupéry</td>
      <td>1943</td>
      <td>140</td>
    </tr>
  </tbody>
</table>
Book Author Published Sales (in millions)
A tale of two cities Charles Dickens 1859 200
The lord of the rings J. R. R. Tolkien 1954-1955 150
The little prince Antoine de Saint-Exupéry 1943 140

Now it's time to take the element a little further. In the following example we'll use regular cells in the header section of the table, together with the header cells. In this particular case, regular cells will provide detailed information about the column, expanding the content of the header cells.

<table class="egt">
  <thead>
    <tr>
      <th>Destination</th>
      <th>By car</th>
      <th>By bicycle</th>
      <th>Walking</th>
    </tr>
    <tr>
      <td></td>
      <td>at 20 mph (average)</td>
      <td>at 9.3 mph (average)</td>
      <td>at 3.1 mph (average)</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hospital</td>
      <td>55 min</td>
      <td>1 h 40 min</td>
      <td>5 h 50 min</td>
    </tr>
    <tr>
      <td>Library</td>
      <td>15 min</td>
      <td>25 min</td>
      <td>1 h 5 min</td>
    </tr>
    <tr>
      <td>Mary's house</td>
      <td>35 min</td>
      <td>1 h 5 min</td>
      <td>3 h 20 min</td>
    </tr>
  </tbody>
</table>
Destination By car By bicycle Walking
at 20 mph (average) at 9.3 mph (average) at 3.1 mph (average)
Hospital 55 min 1 h 40 min 5 h 50 min
Library 15 min 25 min 1 h 5 min
Mary's house 35 min 1 h 5 min 3 h 20 min

In the previous example you can see no difference between the regular cells in the thead section and those in the tbody. Yet, their meaning is different, as defined in the code. Authors can style regular cells in the header to improve its interpretation.

Attributes

Specific attributes

align

The horizontal alignment of text in all affected cells. There are five possible values (case-insensitive):

  • left: text is aligned to the left margin. This is the default value for data cells (td).
  • center: text is centered. This is the default value for header cells (th).
  • right: text is aligned to the right margin.
  • justify: text is justified or aligned to both margins.
  • char: text is aligned to a specific character. It's used together with the char attribute.

This attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors should replace it with style sheet declarations.

Example

<thead align="center">

char

A caracter that will act as axis for text alignment. It's meant to work together with the align attribute when it has the "char" value. In other situations it will be completely ignored.

This attribute has become obsolete in HTML5 and its use is consequently invalid. Authors are adviced to replace it with style sheet declarations.

Example

<thead align="char" char="c">

charoff

An offset, from the first occurrence of the alignment caracter (specified in the char attribute) and in the direction of the text. The resulting character of this calculation will be the axis for text alignment.

For this attribute to be considered, the align attribute's value must be "char" and the char attribute must be present.

This attribute is considered obsolete by HTML5 and its use is no longer recommended. Authors should drop its use in favor of style sheets.

Example

<thead align="char" char="t" charoff="7">

valign

The vertical alignment of text in all affected cells. There are four possible values (case-insensitive):

  • top: text is aligned to the top margin.
  • middle: text is vertically centered.
  • bottom: text is aligned to the bottom margin.
  • baseline: all the cells in a row with this alignment should have their first text line on a common baseline.

This attribute is obsolete according to the HTML5 standard and, therefore, invalid. Authors are adviced to avoid its use and replace it with style sheet declarations.

Example

<thead valign="top">

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.