0%

<td> Table data cell

A normal data cell inside a table row.

By HTML6 (opens in a new tab) · Updated · How we write and check content

<td> is an ordinary data cell inside a <tr>. Text, links, images, lists and even form controls can go in it.

colspan merges a cell across columns, rowspan across rows. Whenever you use them, delete the cells they now cover from the other rows. width, align, bgcolor and other old attributes are obsolete. Use CSS.

colspan, rowspan and headers are covered in the td element definition (opens in a new tab). Try merging cells in the Spanning Cells lesson.

Syntax

<tr>
  <td>Data</td>
</tr>

When to use it

One value per <td>: a price, a date, a status, a short note. A cell can also hold a link, an image or a button, and admin tables often end each row with an Edit action. Once a cell fills up with paragraphs, lists and headings, though, the data has stopped being tabular. Cards or a description list (dl) will read better on a phone.

Some tables are too complex for scope. In those, give each header an id and list the ids in the cell's headers attribute. Most tables never need this. Scope on the header cells covers them.

Nearly every table has this problem: numbers are left-aligned by default, so values of different lengths are ragged. Right-align numeric columns in CSS, and try font-variant-numeric:tabular-nums so every digit has the same width. Do not fake the alignment with spaces or empty cells.

Attributes

AttributeWhat it does
colspanNumber of columns the cell spans.
rowspanNumber of rows the cell spans.
headersIds of the header cells that label this cell.

Live example

Edit the code and watch the preview.

<table>
  <tr>
    <th scope="col">Time</th>
    <th scope="col">Mon</th>
    <th scope="col">Tue</th>
  </tr>
  <tr>
    <th scope="row">9:00</th>
    <td colspan="2">Maths</td>
  </tr>
</table>

More examples

Action buttons in cells

The last cell of each row holds the actions. Edit takes you to another page, which makes it a link. Remove does something on this page, which makes it a button. Each one names the user, so "Edit Ana" is not confused with "Edit Ben".

<table>
  <tr>
    <th scope="col">User</th>
    <th scope="col">Role</th>
    <th scope="col">Actions</th>
  </tr>
  <tr>
    <th scope="row">Ana</th>
    <td>Editor</td>
    <td>
      <a href="/users/ana/edit">Edit Ana</a>
      <button type="button">Remove Ana</button>
    </td>
  </tr>
  <tr>
    <th scope="row">Ben</th>
    <td>Viewer</td>
    <td>
      <a href="/users/ben/edit">Edit Ben</a>
      <button type="button">Remove Ben</button>
    </td>
  </tr>
</table>

Right-aligned numbers

The number cells get a class that right-aligns them and turns on equal-width digits. Units sit under units and thousands under thousands, and you can compare the populations at a glance.

<style>
.num{text-align:right;font-variant-numeric:tabular-nums}
</style>
<table>
  <tr><th scope="col">City</th><th scope="col">Population</th></tr>
  <tr><td>Northvale</td><td class="num">1,204,500</td></tr>
  <tr><td>Eastport</td><td class="num">98,310</td></tr>
  <tr><td>Little Bay</td><td class="num">7,045</td></tr>
</table>

Tip: Delete the cells a spanning cell covers.

Browser support

td works in every browser and is part of the HTML Living Standard. The obsolete width, height, align, valign, bgcolor and nowrap attributes still do something, for compatibility, but they are not valid HTML. The maximum colspan is 1000; rowspan stops at 65534.

Accessibility

Keep empty data cells to a minimum and never put layout content in a td. Each data cell should be explained by its row and column headers; the W3C tables tutorial (opens in a new tab) shows how cells are tied to headers.

Common mistakes

Wrong

<td align="center" width="100">5</td>

Right

<td class="num">5</td>

td align and width are obsolete. Use CSS.

Frequently asked questions

How do I merge cells in an HTML table?

With colspan for columns and rowspan for rows, as in <td colspan="2">. Then remove the cells the merged cell now covers, or the row ends up too long. Merged cells can make a table harder to follow with a screen reader, so use them only when they make the data easier to read.

How do I align text in a table cell?

In CSS: td{text-align:right;vertical-align:top}. The align and valign attributes are obsolete. Numbers are easier to compare when right-aligned. For a single column, use a selector like td:nth-child(3) or a class on each cell, because alignment set on <col> elements never reaches the cells. For styled cells with alignment, borders and colors, the HTMLTable generator (opens in a new tab) previews every change live.

Practise it

Related tables elements

<table>Tabular data laid out in rows and columns.<caption>A table's title, written as the table's first child.<colgroup>Groups table columns so you can style them as one.<col>Stands for one or more columns in a colgroup, for styling.<thead>Wraps the header row or rows of a table.<tbody>Wraps the main rows of data in a table.<tfoot>Holds summary rows such as totals at the foot of a table.<tr>A single table row of cells.<th>Header cell for a column or row, shown bold and centered by default.