HTML <td> tag

Definition and usage

<td> The tag defines the standard data cell in the HTML table.

HTML tables have two types of cells:

  • Header cell - contains header information (using <th> element creation)
  • Data cell - contains data (using <td> element creation)

By default,<td> The text in the element is plain and left-aligned.

The text in the <th> element is default bold and centered.

See also:

HTML Tutorial:HTML Table

HTML DOM Reference Manual:TableData Object

CSS Tutorial:Set table styles

Instance

Example 1

A simple HTML table with two rows and four table cells:

<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
  <tr>
    <td>Cell C</td>
    <td>Cell D</td>
  </tr>
</table>

Try It Yourself

Example 2

How to align <td> of the content (using CSS):

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td style="text-align:right">￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td style="text-align:right">￥4500</td>
  </tr>
</table>

Try It Yourself

Example 3

How to add background color to table cells (using CSS):

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td style="background-color:#FF0000">January</td>
    <td style="background-color:#00FF00">￥3400</td>
  </tr>
 </table>

Try It Yourself

Example 4

How to set the height of a table cell (using CSS):

<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td style="height:100px">January</td>
    <td style="height:100px">￥3400</td>
  </tr>
</table>

Try It Yourself

Example 5

How to specify non-breaking lines in a table cell (using CSS):

<table>
  <tr>
    <th>Verse</th>
  </tr>
  <tr>
    <td style="white-space:nowrap">To the White Emperor's Palace in colorful clouds, a thousand miles back to Jiangling in a day. The monkeys on both sides of the river cry endlessly, and the light boat has passed through ten thousand mountains.</td>
  </tr>
</table>

Try It Yourself

Example 6

How to vertically align <td> of the content (using CSS):

<table style="width:50%;">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr style="height:100px">
    <td style="vertical-align:bottom">January</td>
    <td style="vertical-align:bottom">￥3400</td>
  </tr>
</table>

Try It Yourself

Example 7

How to set the width of a table cell (using CSS):

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td style="width:70%">January</td>
    <td style="width:30%">￥3400</td>
  </tr>
</table>

Try It Yourself

Example 8

How to create a table caption:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Phone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
  </tr>
</table>

Try It Yourself

Example 9

How to create a table with a caption:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>February</td>
    <td>￥4500</td>
  </tr>
</table>

Try It Yourself

Example 10

How to define a table cell spanning multiple rows or columns:

<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th colspan="2">Phone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>bill.gates@example.com</td>
    <td>138-1234-5678</td>
    <td>186-2345-6789</td>
  </tr>
</table>

Try It Yourself

Attribute

Attribute Value Description
colspan Number Specify the number of columns the cell should span.
headers header_id Specify one or more header cells related to the cell.
rowspan Number Set the number of rows the cell should span.

Global Attributes

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

event attributes

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

Default CSS Settings

Most browsers will use the following default values to display <td> Element:

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

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support