The <td> HTML Element | Web Reference

Overview

The <td> element is used to define a data cell in an HTML table. It is an essential component of the table model, interacting with attributes like colspan, rowspan, and headers to shape the table's layout and data presentation.

Examples and Usage

When designing HTML tables, the <td> element acts as the foundational block for data representation. To demonstrate, let's explore several illustrative table configurations that utilize the <td> element.

A Basic Table Structure

Imagine creating a simple table to showcase online products and their respective prices. Here's how we can present this:

<table>
  <tr>
    <td>Product Name</td>
    <td>Product Price</td>
  </tr>
  <tr>
    <td>Product Name</td>
    <td>Product Price</td>
  </tr>
</table>

table,
td {
  border: 2px solid #ccc;
  padding: 8px;
  border-collapse: collapse;
}

This table structure employs rows (<tr>) containing data cells (<td>) to represent product names and their prices. The accompanying CSS ensures that the table and its data cells have borders and padding for better visibility.

A Table Using `colspan` and `rowspan` Attributes

Suppose we're listing online software licenses with different tiers or plans. Merging cells in this situation, or similar ones for that matter, could be helpful. For instance, a product might have both monthly and yearly pricing tiers:

<table>
  <tr>
    <td colspan="2">Software License</td>
  </tr>
  <tr>
    <td>Monthly</td>
    <td>$10</td>
  </tr>
  <tr>
    <td rowspan="2">Yearly</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>$90 (with discount)</td>
  </tr>
</table>

table,
td {
  border: 2px solid #ccc;
  padding: 8px;
  border-collapse: collapse;
}
td[colspan] {
  text-align: center;
  background-color: #f2f2f2;
}

Here, colspan merges the product name cell, while rowspan allows the yearly pricing to span two cells vertically. In addition to the styling we used before, the CSS here provides center alignment for cells with colspan and a subtle background color for differentiation.

Tables offer numerous ways to present data effectively and attractively. The examples shown here provide a glimpse into the versatility of tables. With the inclusion of ARIA roles for accessibility, interactions with related table elements, and the right CSS, tables can be tailored to fit a wide range of needs, ensuring both functionality and aesthetics.

Attribute Breakdown

In addition to the global HTML attributes, the <td> element comes with a set of attributes enabling you to fine-tune its behavior.

Attribute	Description
`colspan`	Specifies the number of columns a cell should span horizontally. The value must be a non-negative integer. The default is 1.
`headers`	Holds a list of id attributes, separated by spaces, that identify the header cells associated with this data cell.
`rowspan`	Indicates the number of rows a cell should span vertically. The value must be a non-negative integer. The default is 1.

More details on deprecated attributes can be found in the Additional Notes section below.

Accessibility Aspects

The <td> element can have different implicit ARIA roles depending on the context within which it appears. Thorough guidance on ARIA aspects is available in the official specification.

Associated Elements

<table>
<tbody>
<tfoot>
<th>
<thead>
<tr>
<caption>
<col>
<colgroup>

Additional Notes

Deprecated attributes such as abbr, align, axis, bgcolor, char, charoff, height, scope, valign, and width should be avoided in modern web development. Most of their functionalities can be replicated using CSS properties like text-align, background-color, height, vertical-align, and width.
The colspan attribute will default to 1 if set to a value higher than 1000.
If the rowspan attribute is set to a value greater than 65534, it will be clipped down to 65534. If set to 0, the cell spans until the table section it's part of (<thead>, <tbody>, <tfoot>) concludes.