docs.rodeo

MDN Web Docs mirror

: The Table Header element

{{HTMLSidebar}} 

The <th> HTML element defines a cell as the header of a group of table cells and may be used as a child of the {{HTMLElement("tr")}}  element. The exact nature of this group is defined by the scope and headers attributes.

{{EmbedInteractiveExample("pages/tabbed/th.html","tabbed-taller")}} 

Attributes

This element includes the global attributes.

Deprecated attributes

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

Usage notes

Examples

See {{HTMLElement("table")}}  for a complete table example introducing common standards and best practices.

Basic column and row headers

This example uses <th> elements to introduce column and row headers in a basic table structure.

HTML

The first row ({{HTMLElement("tr")}}  element) contains the column headers (<th> elements), which act as “titles” for the columns to make it easier to understand the information in the columns and identify the data. To indicate that each column header relates to all cells in the corresponding column, the scope attribute is set to col (column).

The remaining rows contain the main data of the table. Each of these rows has a row header (<th> element) introduced as the first cell. This creates a column with row headers as the first column of the table. Similar to the column headers, the scope attribute is set to row to specify which cells each row header relates to, which in the example below are all data cells ({{HTMLElement("td")}}  elements) in each row.

[!NOTE] Normally, the grouping elements {{HTMLElement("thead")}}  and {{HTMLElement("tbody")}}  are used to group rows with headers into the respective table head and body sections. These elements are omitted in this example to reduce complexity and enable focusing on the use of header cells.

<table>
  <tr>
    <th scope="col">Symbol</th>
    <th scope="col">Code word</th>
    <th scope="col">Pronunciation</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

Some basic CSS is used to style the table and its cells. We use CSS attribute selectors to target header cells based on their scope attribute values, highlighting column and row headers (<th> elements) and differentiating them each other and from the data cells ({{HTMLElement("td")}} ).

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

Result

{{EmbedLiveSample("Basic_column_and_row_headers", 650, 170)}} 

Column and row spanning

This example extends and enhances the basic table from the previous example by adding a second row for additional column headers.

HTML

An additional table row ({{HTMLElement("tr")}}  element) is added as the second header row of the table with two additional column headers (<th> elements). In this way, the “Pronunciation” column is split into two columns, one for the IPA (International Phonetic Alphabet) notation and one for the respelling (the original pronunciation column). The corresponding data cells ({{HTMLElement("td")}}  elements) are added to each subsequent row.

As shown in the usage notes, the colspan and rowspan attributes can be used for the <th> elements to allocate the header cells to the correct columns and rows. To achieve a “two-row” header in the table structure, the first two header cells within the first {{HTMLElement("tr")}}  element are spanned across two rows. The third header cell is spanned two columns wide (remaining in the first row). This setup leaves two available areas in the third and fourth columns in the second row, where the two headers within the second {{HTMLElement("tr")}}  element are automatically placed, with the default value being 1 for the colspan and rowspan attributes.

[!NOTE] Normally, {{HTMLElement("thead")}}  and {{HTMLElement("tbody")}}  elements are used to group rows with headers into the respective table head and body sections. This is not implemented in this example to focus on the headers and spanning and reduce the example’s complexity.

<table>
  <tr>
    <th scope="col" rowspan="2">Symbol</th>
    <th scope="col" rowspan="2">Code word</th>
    <th scope="col" colspan="2">Pronunciation</th>
  </tr>
  <tr>
    <th scope="col">IPA</th>
    <th scope="col">Respelling</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>ˈælfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>ˈbraːˈvo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>ˈtʃɑːli</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>ˈdeltɑ</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

The CSS is unchanged from the previous example.

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

Result

{{EmbedLiveSample("Column_and_row_spanning", 650, 200)}} 

Associate header cells with other header cells

For more complex relationships between header cells, using th elements with the scope attribute alone may not be sufficient for assistive technologies, especially screen readers.

HTML

To improve the {{Glossary("accessibility", "accessibility")}}  of the previous example and to allow screen readers, for example, to speak the headers associated with each header cell, the headers attribute can be introduced along with id attributes. Because of the way the “Pronunciation” column is split into two columns in the example, introducing a “two row” header, assistive technologies such as screen readers may not be able to identify which additional header cells (th elements) the “Pronunciation” header cell is related to and vice versa. Therefore, the headers attribute is used on the “Pronunciation”, “IPA”, and “Respelling” header cells to associate the related header cells based on the values of the unique identifiers from the added id attributes in the form of a space-separated list.

[!NOTE] It’s recommended to use more descriptive and useful values for the id attribute. Each id in a document must be unique to that document. In this example, the id values are single characters to maintain focus on the concept of the headers attribute.

<table>
  <tr>
    <th scope="col" rowspan="2">Symbol</th>
    <th scope="col" rowspan="2">Code word</th>
    <th scope="col" colspan="2" id="p" headers="i r">Pronunciation</th>
  </tr>
  <tr>
    <th scope="col" id="i" headers="p">IPA</th>
    <th scope="col" id="r" headers="p">Respelling</th>
  </tr>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>ˈælfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>ˈbraːˈvo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>ˈtʃɑːli</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>ˈdeltɑ</td>
    <td>DELL tah</td>
  </tr>
</table>

Result

The visual result is unchanged from the previous example table.

Technical summary

Content categories None.
Permitted content Flow content, but with no header, footer, sectioning content, or heading content descendants.
Tag omission The start tag is mandatory.
The end tag may be omitted, if it is immediately followed by a <th> or `{{HTMLElement("td")}}`  element or if there are no more data in its parent element.
Permitted parents A `{{HTMLElement("tr")}}`  element.
Implicit ARIA role columnheader or rowheader
Permitted ARIA roles Any
DOM interface `{{domxref("HTMLTableCellElement")}}` 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN