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 therowgroup
to which it belongs. -
colgroup
: the<th>
is the header of all the cells of thecolgroup
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>
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 between0
and1000
, with1
being its default value, which indicates how many columns the cell extends over. If set to0
, the cell is extended to the last element of the<colgroup>
. -
rowspan
contains a positive integer between0
and65534
, with1
being its default value, which indicates how many rows a cell extends over. If set to0
, 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
Top comments (0)