References

Beginner-friendly references for web development, with live, editable examples.

The HTML <td> tag

Element All modern browsers Updated
Quick answer

The HTML <td> element defines a data cell in a table row. Span cells with colspan and rowspan, and link complex cells to their headers with headers.

Overview

The <td> (table data) element is a standard cell that holds one piece of data inside a <tr> table row. It is the most common cell type — the body of the table is built from rows of <td> cells.

Use the colspan and rowspan attributes to merge a cell across several columns or rows. For cells that label a row or column rather than hold data, use a <th> instead — that distinction is what makes a table readable to assistive technology.

All of the old presentational attributes (align, bgcolor, width and friends) are obsolete; style cells with CSS. In a complex table with multi-level headers, connect a data cell to the headers that govern it using the headers attribute and matching ids.

Syntax

<td colspan="2">Merged data cell</td>

Attributes

The <td> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
colspan A positive integer (default 1). Spans a table cell across columns.
headers A space-separated list of header cell ids. Links data cells to header cells for accessibility.
rowspan A non-negative integer (0 means span to the end of the section). Spans a table cell across rows.

Example

Live example 
<table border="1">
  <tr><td>A</td><td>B</td></tr>
  <tr><td colspan="2">Spans both columns</td></tr>
</table>

Best practices

  • Use <th> for header cells and <td> only for data.
  • Merge cells with colspan and rowspan rather than nesting tables.
  • In complex tables, link data cells to their headers with the headers attribute and matching ids.
  • Style cells with CSS — the old presentational attributes are obsolete.

Frequently asked questions

What is the td element?
A standard table data cell that holds one value inside a <tr> row.
What is the difference between td and th?
<td> holds data; <th> labels a row or column and is announced as a header by screen readers.
How do I merge table cells?
Use colspan to span columns and rowspan to span rows on the cell you want to merge.
How do I style a table cell?
With CSS — set padding, border, text-align and so on. The old HTML attributes are obsolete.
tbody template