HTML - <td> Tag

Quiz

Introduction to <td> Tag

The HTML <td> tag is used to define the table data in a table. It is the key component in building structured tabular content. The <td> tag must be used within a <tr> element, which groups one or more table cells. It can contains the text, images, links or other HTML elements.

By default, the text inside the <td> is aligned to the left horizontally and to the middle vertically, but this can be customized by using the CSS.

Syntax

Following is the syntax of HTML <td> tag −

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

Attributes

Following are the attributes of the <tg> Tag −

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

Example : Basic Table

Let's look at the following example, where we are going to consider the basic usage of 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>

Example : Using colspan Attribute

Consider the following example, where we are going to use the colspan attribute along with 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>

Example : Uisng rowspan Attribute

In the following example, we are going to use the rowspan attribute along with the <td> tag.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
         color:green;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Company</th>
         <th>Location</th>
         <th>Founder</th>
      </tr>
      <tr>
         <td>tutorialspoint</td>
         <td>hyderabad</td>
         <td rowspan="2">MD.Mohtashim</td>
      </tr>
      <tr>
         <td>tutorix</td>
         <td>Noida</td>
      </tr>
   </table>
</body>
</html>

Supported Browsers

Tag
tbody	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page