HTML <Th> Tag

Definition

A <th> element represents a table cell used for a heading. The exact nature of the heading is determined by the scope and headers attributes.

Example

<table>
  <caption>This is the table's caption</caption>
    <thead>
        <tr>
            <th colspan="2">The table header with one column</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>The table body</td>
            <td>with two columns</td>
        </tr>
    </tbody>
</table>

Usage

• An opening tag is required.
• An end tag can be omitted if the <th> element is immediately followed by a <td> or <th> element or if there is no more content in the parent element.
• A <th> element must be a child of a <tr> element.
• The text in a <th> cell is centered by default.

Attributes

The <th> element supports the Global Attributes, along with the following:

• abbr

  The abbr attribute specifies a short abbreviated description or alternative label. This may be announced by technology such as screen readers before cell content.

• colspan

  The colspan attribute specifies the number of columns that the cell should span.

• headers

  The headers attribute allows you to assign one or more headers to a particular cell. The header value corresponds to the id attribute of the <th> elements.

  <table>
  <tr>
    <th rowspan="2" id="h">Homework</th>
    <th colspan="3" id="e">Exams</th>
    <th colspan="3" id="p">Projects</th>
  </tr>
  <tr>
    <th id="e1" headers="e">1</th>
    <th id="e2" headers="e">2</th>
    <th id="ef" headers="e">Final</th>
    <th id="p1" headers="p">1</th>
    <th id="p2" headers="p">2</th>
    <th id="pf" headers="p">Final</th>
  </tr>
  <tr>
  <td headers="h">15%</td>
  <td headers="e e1">15%</td>
  <td headers="e e2">15%</td>
  <td headers="e ef">20%</td>
  <td headers="p p1">10%</td>
  <td headers="p p2">10%</td>
  <td headers="p pf">15%</td>
  </tr>
  </table>

  Try it Yourself

• rowspan

  The rowspan attribute specifies the number of rows that the cell should span.

• scope

  The scope attribute specifies whether the header cell is a header for a column, row, group of rows, or groups of columns.

  The values can include:

  • col
  • colgroup
  • row
  • rowgroup

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile