Skip to content
html.sh

<td> - Table Data Cell Element

The <td> Element

Section titled “The <td> Element”
Table Element

The <td> (table data) element defines a standard data cell in a table. Unlike <th> (header cells), <td> elements contain the actual data values in your table. Data cells can span multiple columns or rows using the colspan and rowspan attributes, making tables flexible for various data layouts.

Quick Example

Section titled “Quick Example”
Result

Syntax

Section titled “Syntax”
<tr>
  <td>Simple data</td>
  <td colspan="2">Spanning two columns</td>
  <td rowspan="2">Spanning two rows</td>
</tr>

Attributes

Section titled “Attributes”

colspan Attribute

Section titled “colspan Attribute”

The colspan attribute specifies how many columns a cell should span horizontally.

<td colspan="3">This cell spans 3 columns</td>

rowspan Attribute

Section titled “rowspan Attribute”

The rowspan attribute specifies how many rows a cell should span vertically.

<td rowspan="2">This cell spans 2 rows</td>

headers Attribute

Section titled “headers Attribute”

For complex tables, the headers attribute explicitly associates the cell with header cells using their IDs.

<td headers="header1 header2">Data</td>

Global Attributes

Section titled “Global Attributes”

The <td> element supports all global HTML attributes.

Deprecated Attributes

Section titled “Deprecated Attributes”

Common Use Cases

Section titled “Common Use Cases”

Basic Data Table

Section titled “Basic Data Table”
Result

Cells with Different Content Types

Section titled “Cells with Different Content Types”
Result

Using colspan - Spanning Columns

Section titled “Using colspan - Spanning Columns”

The colspan attribute makes a cell span multiple columns:

Result

Colspan Pattern Examples

Section titled “Colspan Pattern Examples”
<tr>
  <td colspan="4">This spans all 4 columns</td>
</tr>

Using rowspan - Spanning Rows

Section titled “Using rowspan - Spanning Rows”

The rowspan attribute makes a cell span multiple rows:

Result

Rowspan Pattern Examples

Section titled “Rowspan Pattern Examples”
<tr>
  <td rowspan="2">Spans 2 rows</td>
  <td>Row 1, Col 2</td>
</tr>
<tr>
  <!-- First cell is from previous row -->
  <td>Row 2, Col 2</td>
</tr>

Combining colspan and rowspan

Section titled “Combining colspan and rowspan”
Result

Styling Data Cells

Section titled “Styling Data Cells”

Text Alignment

Section titled “Text Alignment”
Result

Conditional Formatting

Section titled “Conditional Formatting”
Result

Rich Content in Cells

Section titled “Rich Content in Cells”
Result

Accessibility with Data Cells

Section titled “Accessibility with Data Cells”

Using headers Attribute

Section titled “Using headers Attribute”

For complex tables, explicitly associate data cells with headers:

<table>
  <thead>
    <tr>
      <th id="name" scope="col">Name</th>
      <th id="math" scope="col">Math</th>
      <th id="english" scope="col">English</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th id="student1" scope="row">Alice</th>
      <td headers="student1 math">95</td>
      <td headers="student1 english">88</td>
    </tr>
  </tbody>
</table>

This helps screen readers announce: “Alice, Math: 95, English: 88”

Empty Cells

Section titled “Empty Cells”

For empty cells, consider adding context:

<td></td>

CSS Styling Reference

Section titled “CSS Styling Reference”
/* Basic td styling */
td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}


/* Text alignment */
td.align-left { text-align: left; }
td.align-center { text-align: center; }
td.align-right { text-align: right; }


/* Vertical alignment */
td {
  vertical-align: top; /* top, middle, bottom */
}


/* Numeric data */
td.number {
  text-align: right;
  font-family: 'Courier New', monospace;
}


/* Status cells */
td.status-active {
  background-color: #d4edda;
  color: #155724;
}


td.status-inactive {
  background-color: #f8d7da;
  color: #721c24;
}


/* Hoverable cells */
td:hover {
  background-color: #f0f0f0;
  cursor: pointer;
}


/* First/last cell */
td:first-child {
  font-weight: bold;
}


td:last-child {
  text-align: right;
}


/* Cells with padding */
td.compact {
  padding: 5px;
}


td.spacious {
  padding: 20px;
}


/* Cells with borders */
td.bordered {
  border: 2px solid #333;
}


td.no-border {
  border: none;
}

Common Patterns

Section titled “Common Patterns”

Data with Units

Section titled “Data with Units”
<td>125 <span class="unit">GB</span></td>
<td>$1,299 <span class="unit">USD</span></td>
<td>98 <span class="unit">%</span></td>
Section titled “Links in Cells”
<td>
  <a href="/product/123">View Details</a>
</td>

Images in Cells

Section titled “Images in Cells”
<td>
  <img src="avatar.jpg" alt="User avatar" width="40" height="40">
  John Doe
</td>

Forms in Cells

Section titled “Forms in Cells”
<td>
  <input type="checkbox" id="item1">
  <label for="item1">Select</label>
</td>

Best Practices

Section titled “Best Practices”

Use for Data Only

Only use <td> for data cells. Use <th> for headers even in row context.

Keep Content Simple

While you can put complex HTML in cells, simpler content is more accessible.

Calculate Spans Carefully

Ensure colspan/rowspan values don’t create inconsistent column counts.

Align Appropriately

Left-align text, right-align numbers, center-align status indicators.

Provide Context

Use the headers attribute for complex relationships.

Test Responsiveness

Ensure cells work well on mobile, especially with spanning.

Common Mistakes

Section titled “Common Mistakes”

Inconsistent Column Counts

Section titled “Inconsistent Column Counts”
<!-- ❌ Bad: column count mismatch -->
<tr>
  <td colspan="2">A</td>
  <td>B</td>
</tr>
<tr>
  <td>C</td>
  <td>D</td>
  <!-- Missing a cell! -->
</tr>


<!-- ✅ Good: consistent columns -->
<tr>
  <td colspan="2">A</td>
  <td>B</td>
</tr>
<tr>
  <td>C</td>
  <td>D</td>
  <td>E</td>
</tr>

Using <td> for Headers

Section titled “Using <td> for Headers”
<!-- ❌ Bad -->
<tr>
  <td><strong>Product</strong></td>
  <td>Laptop</td>
</tr>


<!-- ✅ Good -->
<tr>
  <th scope="row">Product</th>
  <td>Laptop</td>
</tr>

Browser Support

Section titled “Browser Support”

The <td> element is supported in all browsers:

  • ✅ Chrome (all versions)
  • ✅ Firefox (all versions)
  • ✅ Safari (all versions)
  • ✅ Edge (all versions)
  • ✅ Opera (all versions)
  • ✅ Internet Explorer (all versions)

The colspan, rowspan, and headers attributes are also universally supported.

Section titled “Related Elements”

Specifications

Section titled “Specifications”