DEV Community

Cover image for HTML tags | td
Carlos Espada
Carlos Espada

Posted on

HTML tags | td

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>
Enter fullscreen mode Exit fullscreen mode

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 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 <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

Definition | Example | Support

Discussion (0)