th 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.

Table of contents

01Description
02Examples
03Attributes
- Specific attributes
- Global attributes
04Events
- Global events

Description

The th element represents a header cell in a table. Header cells are supposed to provide header information for data cells (td). Therefore, it's common to find this type of cells inside rows (tr) that are part of the header (thead) or footer (tfoot) sections of a table.

The attributes colspan and rowspan can be used to make cells span two or more adjacent cells in horizontal or vertical direction, respectively.

The th element, along with the td element, can only be present as child of a tr element.

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

Examples

The following example represents a table with a number of rows containing data cells (td) and header cells (th).

<table class="default">
  <tr>
    <th>Book</th>
    <th>Author</th>
    <th>Year</th>
  </tr>
  <tr>
    <td>Regeneration</td>
    <td>Pat Barker</td>
    <td>1991</td>
  </tr>
  <tr>
    <td>Every Man For Himself</td>
    <td>Beryl Bainbridge</td>
    <td>1996</td>
  </tr>
  <tr>
    <td>Affinity</td>
    <td>Sarah Waters</td>
    <td>1999</td>
  </tr>
</table>

Book	Author	Year
Regeneration	Pat Barker	1991
Every Man For Himself	Beryl Bainbridge	1996
Affinity	Sarah Waters	1999

Now, we'll make a couple of cells span the space of others in the same row. This is a very easy task, as we just need to specify how many cells to the right we'll be spanning (in the colspan attribute) and then continue declaring cells taking into account the number of cells spanned.

<table class="default">
  <tr>
    <th>Basic account</th>
    <th>Full account</th>
    <th>Premium account</th>
  </tr>
  <tr>
    <th colspan="2">Free</th>
    <th>Paid</th>
  </tr>
  <tr>
    <td>64 kbps</td>
    <td>96 kbps</td>
    <td>128 kbps</td>
  </tr>
  <tr>
    <td>20 connections</td>
    <td>50 connections</td>
    <td>100 connections</td>
  </tr>
</table>

Basic account	Full account	Premium account
Free		Paid
64 kbps	96 kbps	128 kbps
20 connections	50 connections	100 connections

Lastly, we'll unify some cells in the same column. This time, you'll have to pay attention to the spanned cells when defining the following rows, to avoid declaring more cells than needed. This may be a little confusing at first, because of the structure of HTML tables that consist of a set of rows (and not columns) containing cells.

Additionally, we're making use of the scope attribute in the cell located at the top-left corner of the table, to make sure the user agent understands for which cells it's providing header information to (the cells in the same column).

<table class="default">
  <tr>
    <th scope="col">Period</th>
    <th>Subject</th>
    <th>Grade</th>
  </tr>
  <tr>
    <th rowspan="2">1º semester</th>
    <td>Mathematics</td>
    <td>10</td>
  </tr>
  <tr>
    <td>History</td>
    <td>7</td>
  </tr>
  <tr>
    <th rowspan="2">2º semester</th>
    <td>Biology</td>
    <td>8</td>
  </tr>
  <tr>
    <td>Literature</td>
    <td>7</td>
  </tr>
</table>

Period	Subject	Grade
1º semester	Mathematics	10
1º semester	History	7
2º semester	Biology	8
2º semester	Literature	7

Note how in the third and fifth rows of the previous example, we've declared only two cell, although the table has three columns. This is so, because the first cell in the second and fourth row have spanned the ones below (the ones that haven't been declared).

When used together in a table, the attributes colspan and rowspan must be carefully declared in a way that doesn't produce overlaping cells.

Attributes

Specific attributes

colspan

The number of cells to the right this cell should span. As result, this cell will have a width equal to its original width plus the width of the cells it's spanning.

When used together in a table, the attributes colspan and rowspan must be carefully declared in a way that doesn't produce overlaping cells.

Example

<table class="default">
  <tr>
    <th colspan="2">Header 1</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

Header 1
Cell 1	Cell 2

rowspan

The number of cells to the bottom this cell should span. If this attribute takes the value zero ("0"), this cell will span all remaining cells in the row group (thead, tbody or tfoot). As result, this cell will have a height equal to its height plus the height of the cells it's spanning.

When used together in a table, the attributes colspan and rowspan must be carefully declared in a way that doesn't produce overlaping cells.

Example

<table class="default">
  <tr>
    <th rowspan="2">Header 1</th>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
  </tr>
</table>

Header 1	Cell 2
Header 1	Cell 3

headers

A space-separated list of unique tokens, each of which matches the id attribute of a header cell (th) in the same table. The header cells pointed in this attribute are supposed to provide header information for this cell.

This attribute is rarely needed, and is only required in very complex tables. In most cases the scope attribute of header cells (th) will be enough to achieve accessible tables.

Example

<th headers="period month">November</th>

scope

A group of cells for which this cell provides header information. Possible values (case-insensitive) are:

row: all cells in the same row.
col: all cells in the same column.
rowgroup: all cells in the same row group (thead, tbody or tfoot).
colgroup: all cells in the same column group (colgroup).
auto: browsers decide the affected cells based on a context analysis. This is the default value.

In most cases, the scope attribute can be omitted to let the browser deduct the cells affected by the header. But when exists any chance of ambiguity, the presence of this attribute is highly recommended.

Example

<table class="default">
  <tr>
    <th scope="col">Planet</th>
    <th>Diameter (kms)</th>
    <th>Distance from the Sun (in millions of kms)</th>
  </tr>
  <tr>
    <th>Mercury</th>
    <td>4,878</td>
    <td>57</td>
  </tr>
  <tr>
    <th>Venus</th>
    <td>12,104</td>
    <td>107</td>
  </tr>
</table>

Planet	Diameter (kms)	Distance from the Sun (in millions of kms)
Mercury	4,878	57
Venus	12,104	107

abbr

An alternative to the cell's content, that may be used by browsers when appropriate like, for example, when describing the headers that apply to a particular cell. The value of this attribute is typically a shorter version of the cell's content, but could also give an alternative or complementary description.

Example

<table class="default">
  <tr>
    <th abbr="Income">Income from sold products</th>
    <th abbr="Expenses">General family's expenses</th>
  </tr>
  <tr>
    <td>$2,564.54</td>
    <td>$1,552.22</td>
  </tr>
</table>

Income from sold products	General family's expenses
$2,564.54	$1,552.22

axis

A list of comma-separated category names to which this cell belongs. These conceptual categories can form groups of cells that show data related under some point of view. User agents may use the information in this attribute to display and relate these categories.

This attribute has become obsolete in HTML5 and, therefore, its use is no longer valid. Authors should replace it with the scope attribute of header cells (th).

Example

<td axis="income benefit financial">

align

The horizontal alignment of text in the cell. 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

<td 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

<td 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

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

valign

The vertical alignment of text in the cell. 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

<td valign="top">

width

A value indicating the width of the cell, in pixels or as a percentage relative to the horizontal available space. Browsers may adapt this value according to space availability.

This attribute has become obsolete in HTML5 because of its presentational nature. Authors should drop its use in favor of style sheets.

Example

<td width="25%">

height

A number of pixels indicating the recommended height for the cell. Browsers may adapt this value according to the cell's content.

This attribute has become obsolete in HTML5 because of its presentational nature. Authors should drop its use in favor of style sheets.

Example

<td height="110">

nowrap

A boolean value indicating if browsers should disable automatic text wrapping for the content of the cell.

This attribute has become obsolete in HTML5 because of its presentational nature. Authors should drop its use in favor of style sheets.

Example

<td nowrap>

bgcolor

A color to fill the background of the element.

The bgcolor attribute has been removed from the HTML5 standard because of its presentational nature. Its results can be perfectly achieved with style sheets.

Example

<td bgcolor="#00ccee">

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.