HTML <td> Tag
Last Updated :
12 Mar, 2024
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:
|
It contains header information(tags used for this is <th>). The text in <th> elements is bold and centered for heading by default.Â
|
|
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 :
|
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:
|
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:
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:
Supported Browsers
- Google Chrome 1
- Edge 12
- Firefox 1
- Safari 12.1
- Opera 1
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...