td

The td element defines a data cell in a table. It contains the actual values that headers describe. Use the data-numeric attribute for right-aligned numeric content with tabular numerals.

Description

The <td> (table data) element contains a cell of data in a table. Data cells are associated with header cells (<th>) through the table structure, primarily using the scope attribute on headers.

Vanilla Breeze styles data cells with consistent padding, top vertical alignment, and a thin bottom border. Row hover effects highlight the entire row containing the cell.

When to Use

  • Data values: All cells containing actual data (not headers)
  • tbody cells: The primary content within <tbody> rows
  • tfoot cells: Summary/total values in <tfoot>
  • Empty cells: Placeholder cells to maintain column alignment

When to Use th Instead

Basic Example

Data cells contain the values described by column and row headers.

Product Inventory
Product Category SKU Stock
Wireless Mouse Peripherals WM-001 245
USB-C Hub Accessories UC-002 128
Monitor Stand Furniture MS-003 56
<tbody> <tr> <td>Wireless Mouse</td> <td>Peripherals</td> <td>WM-001</td> <td data-numeric>245</td> </tr> </tbody>

Numeric Data Alignment

Use the data-numeric attribute for cells containing numbers. This right-aligns the content and applies tabular numerals for proper digit alignment.

Sales Report
Month Units Revenue Growth
January 1,250 $37,500.00 +12.5%
February 1,480 $44,400.00 +18.4%
March 1,320 $39,600.00 -10.8%
Total 4,050 $121,500.00 +6.7%
<td data-numeric>$37,500.00</td> <td data-numeric>+12.5%</td>

Why Tabular Numerals Matter

Tabular numerals (monospaced numbers) ensure that digits align vertically, making it easier to compare values in a column. The data-numeric attribute applies font-variant-numeric: tabular-nums automatically.

Tabular vs. Proportional Numerals
Tabular (data-numeric) Proportional (default)
$1,234.56 $1,234.56
$12.34 $12.34
$123,456.78 $123,456.78

Spanning Cells

Use colspan and rowspan to create cells that span multiple columns or rows.

Column Span

Merged Cells Example
Name Mon Tue Wed
Alice Work Conference (2 days)
Bob Vacation
Carol Work Work Remote
<td colspan="2">Conference (2 days)</td> <td colspan="3">Vacation</td>

Row Span

Row Spanning Example
Category Item Price
Electronics Mouse $29.99
Keyboard $79.99
Webcam $59.99
Furniture Desk $299.99
Chair $199.99
<tr> <td rowspan="3">Electronics</td> <td>Mouse</td> <td data-numeric>$29.99</td> </tr> <tr> <!-- No first cell - spanned from above --> <td>Keyboard</td> <td data-numeric>$79.99</td> </tr>

Empty Cells

When data is not available, use appropriate content rather than leaving cells empty.

Data Availability
Product Q1 Q2 Q3
Widget A $12,500 $15,200 $14,800
Widget B (new) N/A $8,900 $10,200
Widget C (discontinued) $6,200 $4,100 -

Use meaningful placeholders:

  • N/A: Not applicable (data doesn't apply to this cell)
  • -: No data or not recorded
  • TBD: To be determined
  • $0: Actual zero value (don't leave blank)

Rich Content in Cells

Data cells can contain various types of content beyond plain text.

Product Details
Product Status Actions
Widget Pro
SKU: WP-001 		In Stock
Gadget Plus
SKU: GP-002 		Low Stock
Tool Basic
SKU: TB-003 		Out of Stock

Accessibility

  • Header associations: Data cells are automatically associated with their column and row headers through the table structure
  • Screen reader navigation: When navigating to a td, screen readers announce the associated headers
  • Complex tables: For tables where automatic association is insufficient, use the headers attribute
  • Avoid empty cells: Use meaningful placeholders like "N/A" or "-" for better screen reader experience

The headers Attribute

For complex tables with multiple levels of headers, explicitly associate data cells with their headers:

<table> <thead> <tr> <th id="product">Product</th> <th id="q1">Q1</th> <th id="q2">Q2</th> </tr> </thead> <tbody> <tr> <th id="widget" scope="row">Widget</th> <td headers="widget q1">$12,500</td> <td headers="widget q2">$15,200</td> </tr> </tbody> </table>

Styling

Vanilla Breeze applies these styles to td elements:

Property Value Purpose
padding var(--size-s) var(--size-m) Consistent spacing
text-align start Left-aligned by default (RTL-aware)
vertical-align top Content aligns to top of cell
border-block-end var(--border-width-thin) Thin bottom border

Numeric Data Styling

Property Value Applied When
text-align end data-numeric attribute present
font-variant-numeric tabular-nums data-numeric attribute present

Attributes

Attribute Values Description
colspan Positive integer Number of columns the cell spans
rowspan Positive integer Number of rows the cell spans
headers Space-separated IDs Explicitly associates cell with header cells
data-numeric Boolean attribute Right-aligns content and uses tabular numerals

Related Elements

  • <th> - Header cells (describe td content)
  • <tr> - Table rows containing td cells
  • <tbody> - Primary container for data rows
  • <tfoot> - Contains summary/total cells
  • <table> - The table container

Layout Alternatives

For non-tabular data that might seem table-like:

  • <layout-grid> - For card layouts that adapt to screen size
  • <dl> - For key-value pairs (definition lists)