How to Use the td Element

The td element is a table cell for data, such as a value or a description. Use th for a heading so people can tell which row or column the data belongs to.

The short answer

A small example

<table>
  <caption>Fruit prices</caption>
  <thead>
    <tr><th scope="col">Fruit</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Apples</th><td>$1.20</td></tr>
    <tr><th scope="row">Oranges</th><td>$0.80</td></tr>
  </tbody>
</table>

“$1.20” is data in the “Apples” row and the “Price” column. A td gets its meaning from the table structure around it, including its row, column, and any related th headings.

Put td inside tr

Put td inside a tr, the element for one table row. A cell can hold text, links, lists, and other flow content. HTML allows the closing tag to be omitted in some cases, but writing both tags makes the cell boundaries easier to see.

Make a cell span rows or columns

Use colspan to make a cell span columns and rowspan to make it span rows. For example, one notice can cover two columns. Cells must not overlap in the table grid.

<tr>
  <th scope="row">Opening hours</th>
  <td colspan="2">Weekdays, 9 am–6 pm</td>
</tr>

rowspan="0" has a special meaning: the cell spans the remaining rows in its row group. Use it only when that structure helps readers understand the table.

Connect data to headings in a complex table

When one data cell relates to several headings, give each th a different id. Then list the related IDs, separated by spaces, in the data cell’s headers attribute. The IDs must refer to headings in the same table.

<th id="product" scope="row">Apples</th>
<th id="price" scope="col">Price</th>
<td headers="product price">$1.20</td>

It is easy to mistype an ID. First see whether you can make the table simpler. For a simple table, well-placed th elements and scope may be enough.

Common mistakes

• Using td for every cell. Use th for row and column headings.
• Using th for a value that is not a heading. Use td for values and descriptions.
• Making text bold with CSS and expecting it to become a heading. Styling does not change HTML meaning.
• Joining too many cells until it is hard to tell which heading describes each value.

Related pages

For table headings, see How to Use the th Element. For the whole table, see How to Use the table Element. For the td specification, cell attributes, and browser, WPT, and accessibility evidence, see the td element in Yugien Atlas.