HTML - <td> Tag

HTML <td> tag is used to define the data cell of the table and used as a child element of <tr> element. The <td> tag may contain text, a form, an image, a table, etc.

By default, the content inside it is positioned to the left. There are exactly the same amount of cells in each row of the table as there are in the longest row. If there are less cells in a row, the browser will automatically fill the row, adding empty cells at the end of it.

Each data cell must be added as a separate <td> element for presenting tabular data in tables.

Syntax

<table>
   <tr>
      <td>..</td>
      <td>..</td>
      ...
   </tr>
</table>

Attribute

Attribute	Value	Description
colspan	number	Specifies the number of columns.
headers	header_id	Specifies one or more header cells a cell is realted to.
rowspan	number	Specifies the number of rows a cell should take.

Examples of HTML td Tag

Bellow examples will illustrate the usage of td tag. Where, when and how to use td tag and how to style the table cell part of a table.

Creating a Simple Table

Let's consider the following example, where we are going to use the <td> tag.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #5DADE2;
      }
   </style>
<body>
   <table>
      <tr>
         <td>1</td>
         <td>2</td>
      </tr>
      <tr>
         <td>3</td>
         <td>4</td>
      </tr>
      <tr>
         <td>5</td>
         <td>6</td>
      </tr>
   </table>
</body>
</html>

Set background-color on Table Cell

Considering another scenario where we are going to apply the background-color to the <td> tag.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #A569BD;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Stundent</th>
         <th>Age</th>
      </tr>
      <tr>
         <td style="background-color:#BFC9CA">Ram</td>
         <td style="background-color:#F9E79F ">23</td>
      </tr>
      <tr>
         <td style="background-color:#BFC9CA ">Raju</td>
         <td style="background-color:#F9E79F ">22</td>
      </tr>
   </table>
</body>
</html>

Align Table Cell

In the following example, we are going to align the <td> tag to the center using the CSS.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table style="width:100%">
      <tr>
         <th>Cars</th>
         <th>Country</th>
      </tr>
      <tr>
         <td>Toyota</td>
         <td style="text-align:center">Japan</td>
      </tr>
      <tr>
         <td>Nissan</td>
         <td style="text-align:center">France</td>
      </tr>
      <tr>
         <td>Kia</td>
         <td style="text-align:center">South Korea</td>
      </tr>
   </table>
</body>
</html>

Setting Width of Table cell

Following is an example where we are going to adjust the width of a table cell using CSS.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #8E44AD;
      }
   </style>
<body>
   <table style="width:100%">
      <tr>
         <th>Student</th>
         <th>Department</th>
      </tr>
      <tr>
         <td style="width:40%">Ram</td>
         <td style="width:60%">Information Technology</td>
      </tr>
      <tr>
         <td>Rahul</td>
         <td>Voice Process</td>
      </tr>
      <tr>
         <td>Maya</td>
         <td>Non-Voice Process</td>
      </tr>
   </table>
</body>
</html>

Supported Browsers

Tag
tbody	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm