The <td> tag adds a table cell to an HTML table.
A table cell is a boxed area that displays a single data item.
Six <td> tags with data in a table.
| First name | Last name |
|---|---|
| Denice | Hobermann |
| Paulo | Cornell |
| Jane | Hollander |
<style>
table.tb { width:300px; border-collapse: collapse; }
.tb th, .tb td { border: solid 1px #777; padding: 5px; }
.tb th {background-color: lightblue; }
</style>
<table class="tb">
<tr>
<th>First name</th>
<th>Last name</th>
</tr>
<tr>
<td>Denice</td>
<td>Hobermann</td>
</tr>
<tr>
<td>Paulo</td>
<td>Cornell</td>
</tr>
<tr>
<td>Jane</td>
<td>Hollander</td>
</tr>
</table>
td = table data cell
The <td> tag creates a standard table cell.
The purpose of the <td> element is to display a single data item.
By default, this element is rendered in normal font and is left aligned.
A table with 35 <td> elements, each one with data.
| First name | Last name | City | Country | |
|---|---|---|---|---|
| Tim | Hallman | thall@aa.com | Dallas | USA |
| Jelle | van Loenen | jelle@loenen.org | Arnhem | Netherlands |
| Jose | Lopez | lopez@argtech.ph | Manila | Philippines |
| Jeroen | Harmsma | jharm@gmail.com | The Hague | Netherlands |
| Sunil | Gupta | sunil@traf.in | Mumbai | India |
| Henry | Wong | henry@google.com | San Francisco | USA |
| Cindy | Velasquez | cindy@alicante.mx | Mexico City | Mexico |
<style>
table.tbl { width:100%; border-collapse: collapse; }
.tbl th, .tbl td { padding:3px; border: 1px solid #999; }
.tbl th { background-color:lightblue; }
</style>
<table class="tbl">
<tr>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
<th>City</th>
<th>Country</th>
</tr>
<tr>
<td>Tim</td>
<td>Hallman</td>
<td>thall@aa.com</td>
<td>Dallas</td>
<td>USA</td>
</tr>
<tr>
<td>Jelle</td>
<td>van Loenen</td>
<td>jelle@loenen.org</td>
<td>Arnhem</td>
<td>Netherlands</td>
</tr> <tr>
<td>Jose</td>
<td>Lopez</td>
<td>lopez@argtech.ph</td>
<td>Manila</td>
<td>Philippines</td>
</tr>
<tr>
<td>Jeroen</td>
<td>Harmsma</td>
<td>jharm@gmail.com</td>
<td>The Hague</td>
<td>Netherlands</td>
</tr>
<tr>
<td>Sunil</td>
<td>Gupta</td>
<td>sunil@traf.in</td>
<td>Mumbai</td>
<td>India</td>
</tr>
<tr>
<td>Henry</td>
<td>Wong</td>
<td>henry@google.com</td>
<td>San Francisco</td>
<td>USA</td>
</tr>
<tr>
<td>Cindy</td>
<td>Velasquez</td>
<td>cindy@alicante.mx</td>
<td>Mexico City</td>
<td>Mexico</td>
</tr>
</table>
This table lists the <td> tag attributes.
| Attribute | Value | Description |
|---|---|---|
| rowspan | number | Number of rows the cell extends. |
| colspan | number | Number of columns the cell extends. |
| id | identifier | Defines a unique identifier for the data cell. |
| class | classnames | Sets one or more CSS classes to be applied to the data cell. |
| style | CSS-styles | Sets the style for the data cell. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| title | text | Sets a title that displays as a tooltip. |
| headers | header-id | Id of the header the current table cell is related to. |
For additional global attributes see our global attributes list.
Do not use the attributes listed below. They are no longer valid on thead in HTML5.
| Attribute | Description | Alternative |
|---|---|---|
abbr |
Contains abbreviated description of the cell's content. | <abbr> tag |
align |
Aligns the content in the td element. | CSS text-align |
axis |
List of headers ids that cell applies to. | headers attribute |
bgcolor |
Defines the background color for the td element. | CSS text-align |
char |
Aligns content to a character, for example "," or ".". | CSS text-align |
charoff |
Shifts column data to the right relative to char attribute. | CSS text-align |
height |
Sets the height of the td element. | CSS height |
scope |
Defines the header cells the td element is related to. | Use scope on th only |
valign |
Sets the vertical alignment of content in the td element. | CSS vertical-align |
width |
Sets the width of the td element. | CSS width |
The <td> tag is part of a group of tags
that are used to create HTML tables.
This group is referred to as the Table tag group.
Together, they allow you to create comprehensive HTML tables.
Here is a list of table tags
| Element | Description |
|---|---|
| <table> | Creates a table that contains elements listed below |
| <caption> | Creates a caption above or under a table |
| <colgroup> | Creates a container for col elements |
| <col> | Creates a style for one or more columns in a table |
| <thead> | Creates a table header that can style all header cells |
| <tbody> | Creates a table body that can style all data cells |
| <tfoot> | Creates table footer that can style all footer cells |
| <tr> | Creates a table row that contains table cells |
| <th> | Creates a table header cell |
| <td> | Creates a table data cell |
Here is when <td> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
