docs.rodeo

MDN Web Docs mirror

: The Table Data Cell element

{{HTMLSidebar}} 

The <td> HTML element defines a cell of a table that contains data and may be used as a child of the {{HTMLElement("tr")}}  element.

{{InteractiveExample("HTML Demo: &lt;td&gt;", "tabbed-taller")}} 

<table>
  <caption>
    Alien football stars
  </caption>
  <tr>
    <th scope="col">Player</th>
    <th scope="col">Gloobles</th>
    <th scope="col">Za'taak</th>
  </tr>
  <tr>
    <th scope="row">TR-7</th>
    <td>7</td>
    <td>4,569</td>
  </tr>
  <tr>
    <th scope="row">Khiresh Odo</th>
    <td>7</td>
    <td>7,223</td>
  </tr>
  <tr>
    <th scope="row">Mia Oolong</th>
    <td>9</td>
    <td>6,219</td>
  </tr>
</table>

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th[scope="col"] {
  background-color: #505050;
  color: #fff;
}

th[scope="row"] {
  background-color: #d6ecd4;
}

td {
  text-align: center;
}

tr:nth-of-type(even) {
  background-color: #eee;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

Attributes

This element includes the global attributes.

Deprecated attributes

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

Usage notes

Examples

See {{HTMLElement("table")}}  for a complete table example introducing common standards and best practices.

Basic data cells

This example uses <td> elements along with other table-related elements to introduce a basic table with data about the phonetic alphabet.

HTML

Some table rows ({{HTMLElement("tr")}}  elements) contain both header cells ({{HTMLElement("th")}}  elements) and data cell <td> elements. The {{HTMLElement("th")}}  element that is the first child of each row forms the first column of the table, with each <th> providing the row header for the data cells within that row. Each corresponding <td> element contains data aligned with its respective column header and row header cell.

[!NOTE] Normally, a table head group with column headers would be implemented to make it easier to understand the information in the columns. The {{HTMLElement("thead")}}  and {{HTMLElement("tbody")}}  elements would be used to group such rows of headers and data into the respective table head and body sections. This is not implemented in this example to focus on the data cells and reduce the complexity of this example.

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td>DELL tah</td>
  </tr>
</table>

CSS

Some basic CSS is used to style the table and its cells. CSS attribute selectors and the {{cssxref(":nth-of-type")}}  pseudo-class are used to alternate the appearance of the cells to make the information in the table easier to understand and identify.

td,
th {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

Result

{{EmbedLiveSample("Basic_data_cells", 650, 140)}} 

Column and row spanning

This example extends and enhances the basic table from the previous example by adding an additional “ABC” cell.

HTML

An additional data cell (<td> element) is introduced within the first row ({{HTMLElement("tr")}}  element). This creates a fourth column in the table.

Using the rowspan attribute, the “ABC” cell is spanned across the first three rows of the table. The last data cells of the subsequent rows each span two columns. This is done using the colspan attribute, aligning them correctly within the table structure. Note that an additional row ({{HTMLElement("tr")}}  element) is added to the table to illustrate this.

<table>
  <tr>
    <th scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td rowspan="3">ABC</td>
  </tr>
  <tr>
    <th scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

CSS

The {{cssxref(":first-of-type")}}  and {{cssxref(":last-of-type")}}  pseudo-classes are used in the CSS to select and style the added “ABC” data cell.

tr:first-of-type td:last-of-type {
  width: 60px;
  background-color: #505050;
  color: #fff;
  font-weight: bold;
  text-align: center;
}

td,
th {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tr:nth-of-type(odd) td {
  background-color: #eee;
}

tr th[scope="row"] {
  background-color: #d6ecd4;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

Result

{{EmbedLiveSample("Column_and_row_spanning", 650, 170)}} 

Associate data cells with header cells

For more complex relationships between data cells (<td> elements) and header cells ({{HTMLElement("th")}}  elements), using {{HTMLElement("th")}}  elements with the scope attribute alone may not be sufficient for assistive technologies, especially screen readers.

HTML

To improve the {{Glossary("accessibility", "accessibility")}}  of the previous example and to allow screen readers, for example, to speak the headers associated with each data cell, the headers attribute can be introduced along with id attributes. Each row header cell ({{HTMLElement("th")}}  element) associated with the “ABC” data cell, i.e., the letters “A”, “B”, and “C”, is given a unique identifier with the id attribute. The “ABC” data cell (<td> element) then uses these id values in a space-separated list for the headers attribute.

[!NOTE] It’s recommended to use more descriptive and useful values for the id attribute. Each id in a document must be unique to that document. In this example, the id values are single characters to maintain focus on the concept of the headers attribute.

<table>
  <tr>
    <th id="a" scope="row">A</th>
    <td>Alfa</td>
    <td>AL fah</td>
    <td headers="a b c" rowspan="3">ABC</td>
  </tr>
  <tr>
    <th id="b" scope="row">B</th>
    <td>Bravo</td>
    <td>BRAH voh</td>
  </tr>
  <tr>
    <th id="c" scope="row">C</th>
    <td>Charlie</td>
    <td>CHAR lee</td>
  </tr>
  <tr>
    <th scope="row">D</th>
    <td>Delta</td>
    <td colspan="2">DELL tah</td>
  </tr>
  <tr>
    <th scope="row">E</th>
    <td>Echo</td>
    <td colspan="2">ECK oh</td>
  </tr>
</table>

Result

While the visual result is unchanged from the previous example table, each data cell (<td>) is now explicitly associated with its row header cell (<th>).

Technical summary

Content categories Sectioning root.
Permitted content Flow content.
Tag omission The start tag is mandatory.
The end tag may be omitted, if it is immediately followed by a `{{HTMLElement("th")}}`  or <td> element or if there are no more data in its parent element.
Permitted parents A `{{HTMLElement("tr")}}`  element.
Implicit ARIA role cell if a descendant of a `{{HTMLElement("table")}}`  element, or gridcell if a descendant of an element with grid role
Permitted ARIA roles Any
DOM interface `{{domxref("HTMLTableCellElement")}}` 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN