❮ Previous Next ❯

HTML <td> tag

The <td> defines a cell (not heading cell) that contains the data of a table. It should be defined inside the <tr> element.

Display Type: Table-cell

Related elements of <td> tag:

<table>: It defines an HTML table.
<caption>: It defines an HTML table name.
<col>: It defines a column in an HTML table.
<colgroup>: It defines a group of columns within an HTML table.
<th>: It defines an HTML table heading.
<tr>: It defines an HTML table row.
<tbody>: It defines the group of main content of an HTML table.
<tfoot>: It defines the group of footer content of an HTML table.
<thead>: It defines the group of header content of an HTML table.

Example of <td> tag

 <tr>
  <td> John </td>
  <td> 21 </td>
 </tr>

Supported Browsers

Tag	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
<td>	Yes	Yes	Yes	Yes	Yes

Full code example

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>

 <tr>
  <th> Name </th>
  <th> Age </th>
 </tr>

 <tr>
  <td> Tom </td>
  <td> 30 </td>
 </tr>
 
 <tr>
  <td> John </td>
  <td> 32 </td>
 </tr>
 
</table>
</body>
</html>

Run The code »

Output on the browser

Name	Age
Tom	30
John	32

1. abbr attribute

The abbr tag was used in older HTML to define the short abbreviated description of the cell's content. This attribute has no visual effect on the ordinary web-browsers but helps in screen-reader.
It is not supported in HTML5. For practical doing, make sure to define in HTML 4.01 Transitional Standard. Use <abbr> element to replace it.

Syntax

<td abbr="text">

Modern and valid example

<td>
 <abbr title="Name"> John </abbr>
</td>
<td>
 <abbr title="expenditure"> $200 </abbr>
</td>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
abbr	Yes	Yes	Yes	Yes	Yes

2. align attribute

The align attribute defines the horizontal alignment of the cells content with respect to its cell. It is not supported in HTML5. For practical doing, make sure to define in HTML 4.01 Transitional Standard. Use CSS property - "text-align" to replace it.

Syntax

<td align="left | center | right | justify | char">

Its default value is left.

Attribute values

Value	Notes
left	It defines left alignment content. (Default value).
center	It defines center alignment content.
right	It defines right alignment content.
justify	It defines equal lines in length.
char	It defines content alignment to a specific character.

CSS replacement example

<td style="text-align: center;">

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
align	Yes	Yes	Yes	Yes	Yes

3. axis attribute

The axis attribute was used to define classified cells for a specific purpose. It is not supported in HTML5. According to W3C, it contains a list of space-separated strings. It also helps in defining group-related columns.

Syntax

<td axis="category_name">

Example

<table>
<tr>
 <th axis="name"> First Name </th>
 <th axis="name"> Last Name </th>
 <th axis="age"> Age </th>
</tr>

<tr>
 <td axis="name"> Tom </td>
 <td axis="name"> Cruise </td>
 <td axis="age"> 23 </td>
</tr>
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
axis	Yes	Yes	Yes	Yes	Yes

4. bgcolor attribute

The bgcolor attribute defines the background-color of a cell. It is obsolete in HTML5. For demonstration, make sure to define in HTML 4.01 Transition Standard. Use CSS property instead - "background-color" to replace it.

Syntax

<td bgcolor="color_name | hex_number | rgb_number">

Attribute values

Value	Notes
color_name	It defines the background-color with a color name like red, green etc.
hex_number	It defines the background color with a hex code (like "#ff0700").
rgb_number	It defines the background color with a rgb code (like "rgb(255,255,255)").

CSS replacement example

<td style="background-color: grey;">
 or
<td style="background-color: #808080;">
 or
<td style="background-color: rgb(128, 128, 128);">

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
bgcolor	Yes	Yes	Yes	Yes	Yes

5. char attribute

The char attribute defines the alignment of the content to a character in a cell. This attribute is valid only when the align attribute is set to char value. It is not supported in HTML5. Use CSS property instead - "text-align" like <td style = "text-align: right">

Syntax

<td align="char" char="character">

Example (obsolete)

  <tr>
   <td align="char" char="."> 12. 5 </td>
   <td align="char" char="."> 3.165 </td>
  </tr>

Numbers will align at the decimal point.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
char	No	No	No	No	No

6. charoff attribute

The charoff attribute defines the horizontal distance (mostly prefer in the number of pixels) of the alignment character specified by the char attribute. This attribute is valid only when the align attribute. It is not supported in HTML5. Use CSS property instead - "text-align" like
<td style = "text-align: right">

Basic syntax

<td align="char" char="." charoff="12">

In the above syntax, align="char" enables alignment based on the character.
char="." defines the characters are aligned based on the decimal (.).
charoff="12" means the decimal (.) is positioned 12 pixel from the left edge of the column.

Attribute values

Attribute values can be either negative or positive.

Value	Note
positive number	It defines the numbers of pixels positioned from the left of the column.
negative number	It defines the numbers of pixels positioned from the right of the column.

Example (obsolete)

<tr>
 <td align="char" char="." charoff="12"> 12.5 </td>
 <td align="char" char="." charoff="12"> 3.165 </td>
</tr>

The above example means that the two numbers are aligned based on the decimal (.) and the decimal is positioned 12 pixels from the left side of the column.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
charoff	No	No	No	No	No

Decimal alignment using CSS

<style>
 td {
  text-align:right;
  font-variant-numeric:tabular-nums;
 }
</style>

7. colspan attribute

The colspan attribute defines the number of columns that a cell should extend. Its default value is 1. Setting its value greater than 1000 is invalid.

Basic syntax

<td colspan="number">

Example-1

<table>

  <tr>
    <td> Tom </td>
    <td> $130 </td>
  </tr>

  <tr>
    <td> John </td>
    <td> $100 </td>
  </tr>

  <tr>
    <td 
      colspan="2">
      Sum: $230
    </td>
  </tr>

</table>

Example-2 (Common)

<table>
 <tr>
  <td colspan="3">Heading Name</td>
 </tr>
 <tr>
  <td> Col 1 </td>
  <td> Col 2 </td>
  <td> Col 3 </td>
 </tr>
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
colspan	Yes	Yes	Yes	Yes	Yes

8. headers attribute

The headers attribute is used in a <td> cell to associate it with one or more <th> header cells (Complex table). It is mostly used with scope attribute to provide the complex HTML table.
Each value corresponds with the value of the id attribute of the <th> element. Note that this attribute has no visual effect on the ordinary web-browsers but helps in screen readers.

The below example is a data of a salesman (Tom) selling a product in 1 year dividing to two sections (1-6 months and 7-12 months).

<table style="width:90%; margin:20px auto; border-collapse:collapse; text-align:center;">
  
  <tr>
    <th id="salesman">Salesman</th>
    <th id="year2025" colspan="2"> 2025 </th>
  </tr>
  
  <tr>
    <th></th>
    <th id="m1">1-6 months</th>
    <th id="m2">7-12 months</th>
  </tr>
  
  <tr>
    <th id="tom">Tom</th>
    <td headers="tom year2025 m1">
      $130
    </td>
    <td headers="tom year2025 m2">
      $150
    </td>
  </tr>
  
</table>

Output on the browser

Salesperson	2025
Salesperson	m1	m2
Tom	$130	$150

For this cell: <td headers="tom year2025 m1"> $130 </td>
It connects to
tom - Row header
year2025 - Main column group
m1 - Months number
The screen readers will read:
Tom – 2025 – m1 – $130

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
headers	Yes	Yes	Yes	Yes	Yes

9. height attribute

The height attribute defines the height of the cell either in pixel or %. A table cell occupies the space that requires to display the content. It is not supported in HTML5. Use CSS property instead - "height" like
<td style = "height: 100px;">

Attribute values

Value	Note
pixels	It defines the height of the cell in pixels.
%	It defines the height of the cell in % within the current <tr> container.

Syntax

<td height="pixels | % ">

CSS Replacement example

<tr>
 <td style="height:200px;"> Tom </td>
 <td style="height:200px;"> 21 </td>
</tr>

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
height	Yes	Yes	Yes	Yes	Yes

10. nowrap attribute

The nowrap attribute defines the content inside a cell to prevent from wrapping to multiple lines. It is not supported in HTML5. Use CSS property instead - "white-space" like
<td style = "white-space: nowrap;">

Syntax

<td nowrap>

CSS Replacement example

<tr>
 <td style="white-space:nowrap;"> This line will not break to multiple lines inside the table cell. </td>
 <td> Normal line. </td>
</tr>

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
nowrap	Yes	Yes	Yes	Yes	Yes

11. rowspan attribute

The rowspan attribute defines the number of rows that a cell should extend. Its default value is 1. If 0 is set, it extends until the end of the table section.

Basic syntax

<td rowspan="number">

Full code example

<table>

<tr>
    <th> Name </th>
    <th> Spend </th>
    <th> Total </th>
  </tr>

  <tr>
    <td> Tom </td>
    <td> $130 </td>
    <td rowspan="2"> $230 </td>
  </tr>

  <tr>
    <td> John </td>
    <td> $100 </td>
  </tr>

</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
rowspan	Yes	Yes	Yes	Yes	Yes

12. valign attribute

The valign attribute defines the vertical alignment of a cell content in the table. It was used in older HTML to align the content of a cell which is now replaced by CSS.

Syntax

<td valign="top | middle | bottom | baseline">

Value	Note
top	It puts the text to the top of the cell as much as it can.
middle	It puts the text to the center of the cell. It preserves both horizontal and vertical alignment.
bottom	It puts the text to the bottom of the cell as much as it can.
baseline	It also puts the text to the bottom of the cell but mainly align to the baseline of the characters.

Top	Bottom
Middle	Baseline

You will notice the difference between baseline and other valign attribute's values when the font-sizes are of different size.

With top value, Demo

With bottom value, Demo

With middle value, Demo

With baseline value, Demo

Always remember valign attribute only preserves vertical alignment. For horizontal alignment use the CSS property- text-align.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
valign	Yes	Yes	Yes	Yes	Yes

Column align using CSS (modern and valid)

CSS property - vertical-align can replace the use of valign attribute.

<tr style="height:80px;">
 <td style="vertical-align:top;">
      Top
 </td>
 <td style="vertical-align:bottom;">
      Bottom
 </td>
</tr>
<tr style="height:80px;">
 <td style="vertical-align:middle;">
      Middle
 </td>
 <td style="vertical-align:baseline;">
      Baseline
 </td>
</tr>

Example of making similar alignment (say middle) of all the cells content within the <table> element.

<style>
 th, td {
 vertical-align:center;
 }
</style>

13. width attribute

The width attribute defines the width of a table cell either in pixel or %. A table cell occupies the space that requires to display the content. It is not supported in HTML5. Use CSS property instead - "width" like
<td style = "width: 300px;">

Attribute values

Value	Note
pixels	It defines the width of the cell in pixels.
%	It defines the width of the cell in % within the current <tr> container.

Syntax

<td width="pixels | % ">

CSS Replacement example

<tr>
 <td style="width:300px;"> Tom </td>
 <td style="width:300px;"> 21 </td>
</tr>

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
width	Yes	Yes	Yes	Yes	Yes

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML <td> tag

Related elements of <td> tag:

Example of <td> tag

Supported Browsers

Full code example

Attributes of <td> tag

1. abbr attribute

Supported Browsers

2. align attribute

Supported Browsers

3. axis attribute

Supported Browsers

4. bgcolor attribute

Supported Browsers

5. char attribute

Supported Browsers

6. charoff attribute

Attribute values

Supported Browsers

Decimal alignment using CSS

7. colspan attribute

Supported Browsers

8. headers attribute

9. height attribute

10. nowrap attribute

11. rowspan attribute

Supported Browsers

12. valign attribute

Supported Browsers

Column align using CSS (modern and valid)

13. width attribute