The <th> HTML Element | Web Reference

Overview

The <th> element is used to define a header cell within an HTML table. It provides a contextual label for a group of table cells. The exact role and applicability of this header cell are determined by the scope and headers attributes.

Examples and Usage

In HTML tables, header cells are important for improving both readability and accessibility. Below, we'll demonstrate a simple table that employs <th> elements for both column and row headers.

<table>
  <thead>
    <tr>
      <th scope="col">Fruit</th>
      <th scope="col">Vitamin C</th>
      <th scope="col">Vitamin A</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Apple</th>
      <td>High</td>
      <td>Low</td>
    </tr>
    <tr>
      <th scope="row">Banana</th>
      <td>Medium</td>
      <td>Low</td>
    </tr>
    <tr>
      <th scope="row">Orange</th>
      <td>Very High</td>
      <td>Medium</td>
    </tr>
  </tbody>
</table>

In this example, the <thead> section contains column headers, labeled "Fruit," "Vitamin C," and "Vitamin A." Each of these headers is marked with a <th> element that includes the scope="col" attribute. This attribute helps both browsers and assistive technologies understand that these headers apply to the columns below them.

Similarly, the <tbody> section contains rows where each starts with a <th> element using scope="row". This attribute defines the cell as a header for that particular row, implying it applies to the cells beside it within the same row.

In addition, we added some minimal CSS to improve the table's appearance.

table {
  border-collapse: collapse;
  border: 2px solid black;
}

th,
td {
  border: 1px solid black;
  padding: 8px;
}

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

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

td {
  background-color: #e6e6fa;
  text-align: center;
}

To put it briefly, the CSS snippet does the following:

Collapses table borders and sets a 2px black border for the table.
Applies a 1px black border and 8px padding to all cells.
Sets distinct background colors for column headers, row headers, and data cells.
Center-aligns the text in data cells.

Note that this is a simplified representation. In real-world scenarios, tables can have more complex structures and may require additional attributes and CSS for better accessibility and styling. The scope attribute is particularly helpful for screen readers to identify the context of the table cells, although other techniques and attributes can also be used.

Attribute Breakdown

In addition to the global HTML attributes, the <th> element comes with a set of attributes enabling you to fine-tune its behavior.

Attribute	Description
`abbr`	Provides a short abbreviated description of the cell's content, often used by speech readers.
`colspan`	Specifies the number of columns a cell should span horizontally. The value must be a non-negative integer. The default is 1.
`headers`	Holds a list of id attributes, separated by spaces, that identify the header cells associated with this data cell.
`rowspan`	Indicates the number of rows a cell should span vertically. The value must be a non-negative integer. The default is 1.
`scope`	Defines the set of cells that the header cell applies to. Valid values include `row`, `col`, `rowgroup`, and `colgroup`.

Accessibility Aspects

The <th> element can have different implicit ARIA roles depending on the context within which it appears. Thorough guidance on ARIA aspects for the <th> element is available in the official specification.

Associated Elements

<table>
<tbody>
<td>
<tfoot>
<thead>
<tr>
<caption>
<col>
<colgroup>

Additional Notes

Deprecated attributes such as align, axis, bgcolor, char, charoff, height, valign, and width should be avoided in modern web development. Most of their functionalities can be replicated using CSS properties.
The colspan attribute will default to 1 if set to a value higher than 1000.
If the rowspan attribute is set to a value greater than 65534, it will be clipped down to 65534. If set to 0, the cell spans until the table section it's part of (<thead>, <tbody>, <tfoot>) concludes.