HTML <td> Tag

The <td> tag is used to create contents for table data cells.

In HTML the <td> tag is used within a <tr> tag.

The content between opening (<td>) and closing (</td>) tags are regular and left-aligned by default.

If you don't want them to be regular and left-aligned, use CSS vertical-align property.

Syntax

The <td> tag comes in pairs. The content must be written between opening (<td>) and closing (</td>) tags.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>Title of the document</title>
   </head>
   <body>
      <table  border="1" style="border-collapse:collapse;">
         <tr>
            <th>Month</th>
            <th>Date</th>
         </tr>
         <tr>
            <td>July</td>
            <td>18.07.2014</td>
         </tr>
      </table>
   </body>
</html>

In the above-mentioned example we have used the <tr> tag for each row. Then we have used the <td> tag inside the <tr> tag for information. In this example separate <td> tags are used.

The colspan and rowspan attributes are generally used with <td> tag.

Recommendation: You can use CSS background property to style the <td> tag.

Example with colspan attribute:

<!DOCTYPE html>
<html>
 <head>
   <title>Title of the document</title>
   <style>
     th, td { padding: 10px; }
   </style>
 </head>
 <body>
   <table border="1" style="width:80%; margin:30px auto; border-collapse:collapse; border:1px solid #095484;">
     <tr style="background:#1c87c9; color:#fff">
       <th>Company e-mail</th>
       <th>Date</th>
     </tr>
     <tr>
       <td style="background:#e6ebef;"><a href="#">info@w3docs.com</a></td>
       <td style="background:#e6ebef;">01.09.2017</td>
     </tr>
     <tr style="height:60px; background:#e6ebef;">
       <td colspan="2" valign="bottom"  style="background:#a3cced;">info@w3docs.com; <strong>01.09.2017 </strong><span style="font-size:14px;">(received date)</span></td>
     </tr>
   </table>
 </body>
</html>

Example with rowspan attribute:

<!DOCTYPE html>
<html>
<head>
  <title>Title of the document</title>
  <style>
    th, td { padding: 10px; }
  </style>
</head>
<body>
  <table border="1" style="width:60%; margin:30px auto; border-collapse:collapse; border:1px solid #095484;">
    <tr style="background:#1c87c9; color:#fff">
      <th>Month</th>
      <th>Year</th>
    </tr>
    <tr>
      <td  style="background:#e6ebef;">March</td>
      <td rowspan="2" style="background:#a3cced; text-align:center;">2014</td>
    </tr>
    <tr style="background:#e6ebef;">
      <td style="background:#e6ebef;">April</td>
    </tr>
  </table>
</body>
</html>

Attributes:

Attributes Value Description
abbr text Defines an abbreviated version of the content in a cell.
This attribute is not supported in HTML5.
align left
right
center
justify
char
Is used to align the content in a cell.
This attribute is not supported in HTML5.
axis category_name Is used to categorize cells.
This attribute is not supported in HTML5.
bgcolor rgb(x,x,x)
#xxxxxx
colorname
Specifies a background color for a cell.
This attribute is not supported in HTML5.
char character Aligns the content in a cell to a character.
This attribute is not supported in HTML5.
charoff number Sets the number of characters the content will be aligned from the character specified by the char attribute.
This attribute is not supported in HTML5.
colspan number Defines the number of columns a cell should span.
headers header_id Defines one or more header cells a cell is related to.
height %
pixels
Sets the height of a cell.
This attribute is not supported in HTML5.
nowrap nowrap Defines that the content inside a cell should not wrap.
This attribute is not supported in HTML5.
rowspan number Sets the number of rows a cell should span.
scope col
colgroup
row
rowgroup
Defines a way to associate header cells and data cells in a table.
This attribute is not supported in HTML5.
valign top
middle
bottom
baseline
Vertical aligns the content in a cell.
This attribute is not supported in HTML5.
width %
pixels
Is used to define the width of a cell.
This attribute is not supported in HTML5.

The <td> tag also supports the Global Attributes.