DEV Community

Cover image for HTML tags | th
Carlos Espada
Carlos Espada

Posted on • Edited on

HTML tags | th

It is used to define a cell as the header of a group of cells in a table. The exact nature of this group is defined by the scope and headers attributes.

With the scope attribute we define the cells of which <th> is the header, and it can have the following values:

  • row: the <th> is the header of all the cells of the row to which it belongs.
  • col: the <th> is the header of all the cells of the column to which it belongs.
  • rowgroup: the <th> is the header of all the cells of the rowgroup to which it belongs.
  • colgroup: the <th> is the header of all the cells of the colgroup to which it belongs.

If scope is not specified or does not have a correct value, the browser will automatically choose the set of cells to which the <th> applies.

In the headers attribute you can put a list of IDs of other <th> with which the cell is related. Example:

<table>
  <tr>
    <th id="name" colspan="2">Name</th>
  </tr>
  <tr>
    <th headers="name">Firsname</th>
    <th headers="name">Lastname</th>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

Neither of these two attributes, scope and headers, have visual translation in browsers but can be used by screen readers.

There are two other attributes that are similar to each other and related to table layout: colspan and rowspan.

  • colspan contains a positive integer between 0 and 1000, with 1 being its default value, which indicates how many columns the cell extends over. If set to 0, the cell is extended to the last element of the <colgroup>.
  • rowspan contains a positive integer between 0 and 65534, with 1 being its default value, which indicates how many rows a cell extends over. If set to 0, the cell extends to the last element of <thead>, <tbody>, or <tfoot>.

The text of a <th> appears by default in bold and centered, to change this and other presentation properties you should not use attributes in the tag, but CSS properties such as background-color, font-weight, text-align, vertical-align or width.

Its parent must be a <tr> element.

Has an implicit ARIA role columnheader or rowheader.

  • Type: table-cell
  • Self-closing: No
  • Semantic value: No

Definition and example | Support

Top comments (0)