Open In App
Related Articles

HTML <td> Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The <td> tag is used to define a standard cell in an HTML table. The ‘rowspan‘ and ‘colspan‘ in the <td> tag tell how many rows or columns a cell covers, while e ‘id’ and ‘class’ help uniquely identify and style the cell using CSS, and ‘style’ determines its visual appearance.

Syntax:

<td>........</td>

Types of cells:

Cells

Description

Header cells

It contains header information(tags used for this is <th>). The text in <th> elements is bold and centered for heading by default. 

Standard cells

It contains data(tags used for this is <td>). The text in <td> elements are regular and left-aligned for data by default. 

Attributes Values :

Attributes Values

Description

rowspan

It specifies the number of rows covered by the cell.

colspan

It determines the number of columns covered by the cell.

id

It identifies the data cell uniquely in the table.

class

It specifies the CSS class to style the cell.

style

It gives the visual appearance of the cell through CSS properties.

There are many attributes supported by HTML4.1 but removed from HTML5 are listed below:

Removed from HTML 5

Description

abbr

This attribute is used as an abbreviated version of the text content in a header cell.

align

It sets the alignment the text content within the table.

axis

It categorizes header cells in the table.

bg color

It sets the background color of a header cell.

char

Aligns the content in a header cell to a character.

charoff

It is used to sets the number of characters that will be aligned from the character specified by the char attribute. The value of these attributes are in numeric form.

colspan

Number of columns a header cell should span.

headers

Specifies multiple header cells a cell is related to.

height

It sets the height of a header cell in the table.

nowrap

It specifies that the content inside a header cell should not wrap.

scope

It is used to specify the score of header content.

sorted

It is used to sort the direction of a column.

valign

It is used to set the vertical alignment of text content.

width

It is used to set the width of a header cell.

Example 1: This example showcases the use of the <td> tag within a table structure, emphasizing a simple representation of user data in a visually stylized manner using CSS for border and text color styling.

html

<!DOCTYPE html>
<html>
 
<head>
    <title>td tag</title>
    <style>
        body {
            text-align: center;
        }
 
        h1 {
            color: green;
        }
 
        th {
            color: blue;
        }
 
        table,
        tbody,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>td Tag</h2>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>User Id</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Shashank</td>
                    <td>@shashankla</td>
                </tr>
                <tr>
                    <td>GeeksforGeeks</td>
                    <td>@geeks</td>
                </tr>
            </tbody>
        </table>
    </center>
</body>
 
</html>

                    

Output:

Example 2 :In this example, we will change background color and set the height of table cell.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>td tag</title>
</head>
 
<body>
    <center>
        <table border="1">
            <tr>
                <td style="background-color: lightblue; height: 40p">
                    Cell 1
                </td>
                <td>Cell 2</td>
            </tr>
        </table>
 
    </center>
</body>
 
</html>

                    

Output:

kn

Output

Example 3: In this example, we will change width of a table cell and vertical align content inside <td>.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>td tag</title>
</head>
 
<body>
    <center>
        <table border="1" style="width:100%; border: 1px solid black; border-collapse: collapse;">
            <tr>
                <th style="width:50%">
                    Category
                </th>
                <th style="width:30%">
                    Amount
                </th>
                <th style="width:20%">
                    Percentage
                </th>
            </tr>
            <tr>
                <td style="vertical-align:bottom; height:100px;">
                    Groceries
                </td>
                <td style="vertical-align:bottom">
                    Rs250
                </td>
                <td style="vertical-align:bottom">
                    Rs50
                </td>
            </tr>
            <tr>
                <td style="vertical-align:bottom;">
                    Salary
                </td>
                <td style="vertical-align:bottom">
                    Rs200
                </td>
                <td style="vertical-align:bottom">
                    40
                </td>
            </tr>
        </table>
    </center>
</body>
 
</html>

                    

Output:

Screenshot-2023-12-26-133629

Supported Browsers

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Safari 12.1
  • Opera 1


Last Updated : 26 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads