HTML / HTML Tags

HTML <Th> Tag

Dec 12, 2022
2 min read
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>

  • 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

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes