Carlos Espada
Posted on September 30, 2021
It is used to define a cell that contains data.
In the headers
attribute you can put a list of IDs of the <th>
that serve as the header to the cell. Example:
<table>
<tr>
<th id="name">Name</th>
<th id="email">Email</th>
<th id="phone">Phone</th>
<th id="addr">Address</th>
</tr>
<tr>
<td headers="name">John Doe</td>
<td headers="email">someone@example.com</td>
<td headers="phone">+45342323</td>
<td headers="addr">Rosevn 56,4300 Sandnes,Norway</td>
</tr>
</table>
The headers
attribute has no 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 <td>
appears by default aligned to the left, to change this and other presentation properties you should not use attributes in the tag, but CSS properties such as background-color
, font-weight
, height
, text-align
, vertical-align
or width
.
Its parent must be a <tr>
element.
Has an implicit ARIA role cell
.
- Type: table-cell
- Self-closing: No
- Semantic value: No
Posted on September 30, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.