You are displaying a user's recent invoices in a table: the date, the amount, the payment status. Each value needs to sit somewhere, in an ordinary table cell, not in the column heading that announces what each column represents.
That is exactly the role of the <td> tag: it holds a piece of data, a value among others, and it stands clearly apart from the cell that plays a header role, <th>.
Definition
<td> stands for "table data". It is the cell that holds an ordinary value inside a table: a date, a price, a status, a name, anything that is not a row or column heading. It sits inside a row, itself delimited by the tr tag.
Each td corresponds to one cell, positioned in the order it appears inside its row. The browser automatically lines up cells into columns based on their position, with no need to state explicitly which column each one belongs to.
Merging cells: colspan and rowspan
Two attributes let a cell span several columns or several rows at once. colspan="2" stretches the cell across two columns, useful for instance for a subtotal row that merges two headings into a single wide one. rowspan="3" stretches it across three rows, handy when the same category applies to several consecutive rows and repeating it on every row would be redundant.
Both attributes change the number of cells expected on the rows involved: a cell merged across two columns counts as two in the total column count of its row, which means one cell must be removed elsewhere on that same row for everything to stay consistent.
A common trap with colspan and rowspan is forgetting that a merged cell reduces the number of td elements to write on the rows it crosses. In the example below, the first row only holds two cells after the one merged across two columns, since that one already occupies the place of two. Forgetting this shifts every following column silently, and the table becomes unreadable.
<table>
<tr><td rowspan="2">Hosting</td><td>Domain name</td><td>$13</td></tr>
<tr><td>SSL certificate</td><td>$0</td></tr>
<tr><td colspan="2">Total</td><td>$13</td></tr>
</table>What a cell can hold
A td cell is not limited to text or a number. It can hold an image, a link, a button, a form field, or even several paragraphs: the allowed content depends on context, not on some restriction specific to td. A product table could, for instance, place an "Add to cart" button directly inside the price cell.
An empty cell still matters for structure: it is better to write <td></td> than to omit the cell entirely, or every following column on that row shifts out of place.
| Attribute | Role | Example |
|---|---|---|
colspan | Merges neighbouring columns | colspan="2" |
rowspan | Merges neighbouring rows | rowspan="3" |
headers | Links the cell to one or more headers by their id, useful on complex tables | headers="month total" |
Difference from th
The difference between td and th does not necessarily show on screen, a browser often renders both quite similarly, but it shows in the meaning each one gives the document. th announces that a cell serves as a header for other cells, information screen readers use to recall the column or row heading before every value read out. td carries no such signal, it stays neutral, a value among others.
This distinction matters especially on a table longer than a few rows: without th properly set, a blind user quickly loses track of which column they are hearing values from, since nothing reminds them of the heading.
Best practices
Reserve td for the actual values of the table, never for a row or column heading: that distinction mainly serves keyboard and screen reader navigation. Never use a table to lay out an entire page, a table should describe data genuinely organised into rows and columns. Right-align numbers in CSS to make comparing one column against another easier, a setting td never applies by default.
Frequently asked questions
Does an empty td still need to be written?
Yes, always. Skipping an empty cell instead of writing <td></td> shifts every following cell on that row to the left, and the whole table loses its column alignment from that row onward.
Can colspan and rowspan be combined on the same cell?
Yes, both attributes can be set together on the same td, which then spans several columns and several rows at once. That combination makes the table considerably harder to follow for a screen reader though, so it is best kept for cases where it adds real visual clarity.
Why do my numbers not align right like they would in a spreadsheet?
Because td has no particular alignment by default, its content sits left-aligned like ordinary text. Right-aligning numeric values, the usual spreadsheet convention, is set in CSS with a text-align rule applied to the column or the cells involved.