HTML <td> Tag

What You’ll Learn

The <td> tag defines a data cell in an HTML table. This guide covers syntax, colspan and rowspan, td vs th, CSS styling, accessibility, and best practices for beginners.

What Is the <td> Tag?

The <td> tag is an HTML element that represents a table data cell. The name stands for “table data.” Each td holds one piece of information inside a table row.

A td element must be placed inside a tr (table row), which in turn sits inside table, tbody, thead, or tfoot.

📝 Syntax

Wrap cell content between opening and closing td tags inside a tr row:

<td>Your data here</td>

Row of Data Cells

<tr>
  <td>John Doe</td>
  <td>25</td>
  <td>Web Developer</td>
</tr>

Syntax Rules

• td must be a child of tr — never place it directly inside table.
• Keep the same number of effective cells per row (accounting for colspan and rowspan).
• Use th for column or row headers, not td, unless the cell is genuinely data.
• Style cells with CSS rather than obsolete HTML presentational attributes.

⚖️ <td> vs <th>

Examples Gallery

Basic data cells, column spanning, and row spanning with copy-ready code and live previews.

<tr>
  <td>John Doe</td>
  <td>25</td>
  <td>Web Developer</td>
</tr>

<tr>
  <td colspan="2">Spanning Two Columns</td>
  <td>Cell 3</td>
</tr>

<tr>
  <td rowspan="3">Spanning Three Rows</td>
  <td>Row 1, Col 2</td>
</tr>
<tr>
  <td>Row 2, Col 2</td>
</tr>

♿ Accessibility

• Use th for headers — Column labels belong in th, not td.
• Associate headers — In complex tables, use scope on th or headers on td.
• Keep merged cells meaningful — Only use colspan/rowspan when the layout aids comprehension.
• Add a caption — Describe the table purpose so data cells have context.

💡 Best Practices