<td>

Defines a standard data cell in a table

Definition and Usage

The <td> element establishes a standard data cell in an HTML table.

An HTML table has two kinds of cells:

Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)

The text in <td> elements are regular and left-aligned by default.

The text in <th> elements are bold and centered by default.

Tip: Use the colspan and rowspan attributes to make cells span multiple columns or rows.

Note: The <td> element must be nested inside a <tr> (table row) element.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The <td> tag supports the Global Attributes in HTML.

The <td> tag also supports the Event Attributes in HTML.

Specific Attributes

Attribute	Value	Description
colspan	number	Specifies the number of columns a cell should span
rowspan	number	Specifies the number of rows a cell should span
headers	header_id	Specifies one or more header cells a cell is related to (for accessibility)

Deprecated Attributes

The following attributes are deprecated in HTML5. Use CSS instead:

Attribute	Description	CSS Alternative
align	Aligns the content in a cell	Use CSS `text-align`
bgcolor	Specifies the background color	Use CSS `background-color`
char	Aligns the content to a character	Not supported in CSS3
charoff	Sets alignment offset	Not supported in CSS3
height	Sets the height of a cell	Use CSS `height`
nowrap	Prevents text wrapping in a cell	Use CSS `white-space: nowrap`
valign	Vertical aligns the content in a cell	Use CSS `vertical-align`
width	Specifies the width of a cell	Use CSS `width`

Examples

Basic Table Cells

Create a simple table with data cells:

Example
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>30</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>Smith</td>
    <td>25</td>
  </tr>
</table>

Using colspan Attribute

Make a cell span multiple columns:

Example
<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Contact Information</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>555-1234</td>
  </tr>
  <tr>
    <td colspan="3">Total: 1 employee</td>
  </tr>
</table>

Using rowspan Attribute

Make a cell span multiple rows:

Example
<table border="1">
  <tr>
    <th>Name</th>
    <th>Contact</th>
    <th>Type</th>
  </tr>
  <tr>
    <td rowspan="2">John Doe</td>
    <td>john@example.com</td>
    <td>Email</td>
  </tr>
  <tr>
    <td>555-1234</td>
    <td>Phone</td>
  </tr>
</table>

Using headers Attribute for Accessibility

Link data cells to header cells in complex tables:

Example
<table border="1">
  <thead>
    <tr>
      <th id="name">Name</th>
      <th id="email">Email</th>
      <th id="phone">Phone</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="name">John Doe</td>
      <td headers="email">john@example.com</td>
      <td headers="phone">555-1234</td>
    </tr>
    <tr>
      <td headers="name">Jane Smith</td>
      <td headers="email">jane@example.com</td>
      <td headers="phone">555-5678</td>
    </tr>
  </tbody>
</table>

Styled Table Cells

Apply CSS styling to table cells:

Example
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  th {
    background-color: #745af2;
    color: white;
  }

  td:hover {
    background-color: #f5f5f5;
  }

  .highlight {
    background-color: #fff3cd;
    font-weight: bold;
  }
</style>

<table>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Stock</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td class="highlight">$999</td>
    <td>15</td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td>$25</td>
    <td>50</td>
  </tr>
</table>

Complex Table with colspan and rowspan

Create a complex table layout:

Example
<table border="1">
  <tr>
    <th rowspan="2">Name</th>
    <th colspan="2">Contact</th>
    <th rowspan="2">Department</th>
  </tr>
  <tr>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>555-1234</td>
    <td>Engineering</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>jane@example.com</td>
    <td>555-5678</td>
    <td>Marketing</td>
  </tr>
</table>

Data Table with Mixed Content

Include various content types in table cells:

Example

Unavailable or blocked: image “laptop.jpg”; image “mouse.jpg”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

<table border="1">
  <tr>
    <th>Product</th>
    <th>Image</th>
    <th>Description</th>
    <th>Action</th>
  </tr>
  <tr>
    <td>Laptop</td>
    <td><img src="laptop.jpg" alt="Laptop" width="50" /></td>
    <td>High-performance laptop with 16GB RAM</td>
    <td><button>Add to Cart</button></td>
  </tr>
  <tr>
    <td>Mouse</td>
    <td><img src="mouse.jpg" alt="Mouse" width="50" /></td>
    <td>Wireless ergonomic mouse</td>
    <td><button>Add to Cart</button></td>
  </tr>
</table>

Try it Yourself

Interactive Example

Here's a live example of table cells with colspan:

Product	Pricing
Laptop	Regular: $999	Sale: $799
Mouse	$25 (No sale)

Try in Code Playground

td vs th

Understanding the difference between data cells and header cells:

Aspect	<td>	<th>
Purpose	Contains table data	Contains header information
Default Style	Regular weight, left-aligned	Bold, centered
Semantic Meaning	Data cell	Header cell (describes data)
Accessibility	Read as data by screen readers	Read as header by screen readers
Usage	Actual data values	Column/row labels

Accessibility with headers Attribute

For complex tables, use the headers attribute to improve accessibility:

Give each <th> element a unique id
In <td> elements, reference the header IDs using headers attribute
Screen readers will announce the header names when reading data cells
Particularly useful for tables with multiple header levels
Helps users understand the context of each data cell

Best Practice: For simple tables, using scope attribute on <th> is usually sufficient. Use headers attribute for complex tables with multiple header levels.

Best Practices

Use <th> for header cells, <td> for data cells
Use colspan and rowspan sparingly - they can make tables confusing
Always style cells with CSS instead of deprecated HTML attributes
For complex tables, use the headers attribute to improve accessibility
Keep cell content concise and scannable
Use consistent data formatting within columns
Add appropriate padding to cells for better readability
Consider responsive design for mobile devices

Default CSS Settings

Most browsers will display the <td> element with the following default values:

Default CSS

Unavailable or blocked: markup context “Matching lesson markup is not supplied; this fragment uses a generic HTML scaffold.”. Provide inline styles and scripts, embedded images or the missing HTML context. External requests and browser dialogs stay blocked.

td {
  display: table-cell;
  vertical-align: inherit;
  text-align: left;
}

Related Tags

<table>
Defines a table
<tr>
Defines a row in a table
<th>
Defines a header cell in a table
<thead>
Groups header content in a table
<tbody>
Groups body content in a table
<caption>
Defines a table caption