HTML - Tag - Tutorialspoint

Maybe your like

HTML - <td> Tag Previous Quiz Next

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 −

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>