totn HTML

HTML: <td> tag

This HTML tutorial explains how to use the HTML element called the <td> tag with syntax and examples.

Description

The HTML <td> tag defines a standard cell in an HTML table. It will contain data for the table, and not table headings. This tag is also commonly referred to as the <td> element.

Syntax

In HTML, the syntax for the <td> tag is: (example of a table where the second row contains the standard cells or data for the table)

<body>
<table>
  <tr>
    <th>Item</th>
    <th>Amount</th>
  </tr>
  <tr>
    <td>Bananas</td>
    <td>$8</td>
  </tr>
</table>
</body>

Or, the <td> tag can be defined within the optional <tbody> tag as follows: (which will be discussed more in the <tbody> tag tutorial)

<body>
<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bananas</td>
      <td>$8</td>
    </tr>
  </tbody>
</table>
</body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <td> tag:

Attribute Description HTML Compatibility
abbr Short description for contents of cell Obsolete in HTML5
align Horizontal alignment of text. It can be one of the following values: left, center, right, justify, char Deprecated in HTML 4.01, Obsolete in HTML5, use CSS
axis List of strings, separated by spaces. Use scope attribute instead. Obsolete in HTML5
bgcolor Background color of cell Non-standard, use CSS
char Set the character to align the cells in a column Deprecated in HTML 4.01, Obsolete in HTML5
charoff Number of characters to offset column data from the alignment characters (in char attribute) Deprecated in HTML 4.01, Obsolete in HTML5
colspan Number of columns the cell extends (Default is 1, max value is 1000) HTML 4.01, HTML5
headers List of strings (separated by spaces) corresponding to the id attribute of the <th> element that it applies to HTML 4.01, HTML5
rowspan Number of rows that the cell extends (Default is 1, max value is 65534) HTML 4.01, HTML5
scope List of strings, separated by spaces Obsolete in HTML5
valign Vertical alignment of text. It can be one of the following values: baseline, bottom, middle, top Deprecated in HTML 4.01, Obsolete in HTML5, use CSS

Note

  • The HTML <td> element is found in an HTML table within the <body> tag.
  • The <td> tag defines the standard cells in the table which are displayed as normal-weight, left-aligned text.
  • The <tr> tag defines the table rows. There must be at least one row in the table.
  • The <th> tag defines the header cells in the table which are displayed as bold, center-aligned text.

Browser Compatibility

The <td> tag is compatible with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • Edge Mobile
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the <td> tag below, exploring examples of how to use the <td> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

If you created a new web page in HTML5, your <td> tag might look like this:

<!doctype html>
<html>

<head>
<meta charset="UTF-8">
<title>HTML5 Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <tr>
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
  </tr>
  <tr>
    <td>Data in Column 1, Row 2</td>
    <td>Data in Column 2, Row 2</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 3</td>
    <td>Data in Column 2, Row 3</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 4</td>
    <td>Data in Column 2, Row 4</td>
  </tr>
</table>
</body>

</html>

In this HTML5 Document example, we have created a table using the <table> tag that has 2 columns and 4 rows. Row 1 of the table is defined using the first <tr> tag. It has 2 table heading cells defined using the <th> tag. Rows 2 - 4 of the table use the <td> tag to define standard table cells.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <td> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <tr>
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
  </tr>
  <tr>
    <td>Data in Column 1, Row 2</td>
    <td>Data in Column 2, Row 2</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 3</td>
    <td>Data in Column 2, Row 3</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 4</td>
    <td>Data in Column 2, Row 4</td>
  </tr>
</table>
</body>

</html>

In this HTML 4.01 Transitional Document example, we have created a table using the <table> tag that has 2 columns and 4 rows. Row 1 of the table is defined using the first <tr> tag. It has 2 table heading cells defined using the <th> tag. Rows 2 - 4 of the table use the <td> tag to define standard table cells.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <td> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <tr>
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
  </tr>
  <tr>
    <td>Data in Column 1, Row 2</td>
    <td>Data in Column 2, Row 2</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 3</td>
    <td>Data in Column 2, Row 3</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 4</td>
    <td>Data in Column 2, Row 4</td>
  </tr>
</table>
</body>

</html>

In this XHTML 1.0 Transitional Document example, we have created a table using the <table> tag that has 2 columns and 4 rows. Row 1 of the table is defined using the first <tr> tag. It has 2 table heading cells defined using the <th> tag. Rows 2 - 4 of the table use the <td> tag to define standard table cells.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <td> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.0 Strict Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <tr>
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
  </tr>
  <tr>
    <td>Data in Column 1, Row 2</td>
    <td>Data in Column 2, Row 2</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 3</td>
    <td>Data in Column 2, Row 3</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 4</td>
    <td>Data in Column 2, Row 4</td>
  </tr>
</table>
</body>

</html>

In this XHTML 1.0 Strict Document example, we have created a table using the <table> tag that has 2 columns and 4 rows. Row 1 of the table is defined using the first <tr> tag. It has 2 table heading cells defined using the <th> tag. Rows 2 - 4 of the table use the <td> tag to define standard table cells.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <td> tag might look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>XHTML 1.1 Example by www.techonthenet.com</title>
</head>

<body>
<table>
  <tr>
    <th>Column 1 Heading</th>
    <th>Column 2 Heading</th>
  </tr>
  <tr>
    <td>Data in Column 1, Row 2</td>
    <td>Data in Column 2, Row 2</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 3</td>
    <td>Data in Column 2, Row 3</td>
  </tr>
  <tr>
    <td>Data in Column 1, Row 4</td>
    <td>Data in Column 2, Row 4</td>
  </tr>
</table>
</body>

</html>

In this XHTML 1.1 Document example, we have created a table using the <table> tag that has 2 columns and 4 rows. Row 1 of the table is defined using the first <tr> tag. It has 2 table heading cells defined using the <th> tag. Rows 2 - 4 of the table use the <td> tag to define standard table cells.

Share on: