Tag <td> In HTML
Our topic in this post is Tag <td>.We will look through the examples in hopes that it would provide learners with what they need to learn.
Tag td stand for table data cell element.
The following HTML table has five rows and two cells:
Example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
</tr>
<tr>
<td>Row 4 Cell 1</td>
<td>Row 4 Cell 2</td>
</tr>
<tr>
<td>Row 5 Cell 1</td>
<td>Row 5 Cell 2</td>
</tr>
</table>
</body>
</html>
An example of a table with five rows and two table cells, with the content inside the cells aligned to the center with CSS:
Tag td Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: 0 auto;
}
td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
</tr>
<tr>
<td>Row 4 Cell 1</td>
<td>Row 4 Cell 2</td>
</tr>
<tr>
<td>Row 5 Cell 1</td>
<td>Row 5 Cell 2</td>
</tr>
</table>
</body>
</html>
Here is an example to add a background color to a specific table cell:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: 0 auto;
}
td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
td:first-child {
background-color: red;
}
td:nth-child(2) {
background-color: yellow;
}
td:nth-child(2):hover {
background-color: blue;
}
</style>
</head>
<body>
<table>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
<tr>
<td>Row 3 Cell 1</td>
<td>Row 3 Cell 2</td>
</tr>
<tr>
<td>Row 4 Cell 1</td>
<td>Row 4 Cell 2</td>
</tr>
<tr>
<td>Row 5 Cell 1</td>
<td>Row 5 Cell 2</td>
</tr>
</table>
</body>
</html>
Here is an example of a table with two rows and two table cells, with the height of all cells set to 50 pixels:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: 0 auto;
}
td {
padding: 10px;
border: 1px solid #ccc;
height: 50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1: Artificial Intelligence</td>
<td>Cell 2: Blockchain Technology</td>
</tr>
<tr>
<td>Cell 3: Internet of Things (IoT)</td>
<td>Cell 4: Quantum Computing</td>
</tr>
</table>
</body>
</html>
No word-wrapping example in table cell:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: 0 auto;
}
td {
padding: 8px;
border: 1px solid rgb(98, 39, 39);
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tr>
<td>Cell 1: Artificial Intelligence</td>
<td>Cell 2: Blockchain Technology</td>
</tr>
<tr>
<td>Cell 3: Internet of Things (IoT)</td>
<td>Cell 4: Quantum Computing</td>
</tr>
</table>
</body>
</html>
Table with a row and two cells. Word wrappers are not used for the left-aligned content:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
td {
padding: 10px;
border: 1px solid #ccc;
text-align: left;
white-space: nowrap;
}
</style>
</head>
<body>
<table>
<tr>
<td>Technology</td>
<td>Description</td>
</tr>
</table>
</body>
</html>
Define the width of the table cell through CSS:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 80%;
margin: 0 auto;
}
td {
width: 40%;
padding: 8px;
border: 1px solid maroon;
}
</style>
</head>
<body>
<table>
<tr>
<td>Country</td>
<td>Capital</td>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
</tr>
<tr>
<td>Canada</td>
<td>Ottawa</td>
</tr>
<tr>
<td>China</td>
<td>Beijing</td>
</tr>
</table>
</body>
</html>
Creation of table headers in HTML table:
Example:
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>USA</td>
<td>Washington D.C.</td>
</tr>
<tr>
<td>Canada</td>
<td>Ottawa</td>
</tr>
<tr>
<td>India</td>
<td>New Delhi</td>
</tr>
<tr>
<td>China</td>
<td>Beijing</td>
</tr>
</table>
</body>
</html>
Here is an example of how to create a table with a caption in HTML:
Example:
<!DOCTYPE html>
<html>
<body>
<table>
<caption>Employee List</caption>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
</tr>
<tr>
<td>John Smith</td>
<td>35</td>
<td>Manager</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>28</td>
<td>Developer</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>40</td>
<td>Sales</td>
</tr>
</table>
</body>
</html>
Here is an example of how the <td> tag can be used to create a unique table cell in HTML:
Example:
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Availability</th>
</tr>
<tr>
<td>Apple</td>
<td>$1.50</td>
<td>
<div class="unique-cell">
<p>In stock</p>
<button>Add to cart</button>
</div>
</td>
</tr>
<tr>
<td>Banana</td>
<td>$0.75</td>
<td>
<div class="unique-cell">
<p>Out of stock</p>
<button disabled>Add to cart</button>
</div>
</td>
</tr>
</table>
</body>
</html>
By default, the text in the <th> tags is bold and centered.
Table Of Content-
Tag Td Usage
The Tag td <td> indicates a regular data cell in an HTML table.
There are two types of cells in an HTML table:
- The header cells – hold the header information (made by the <th> tag)
- The data cell – holds data (made with the <td> element)
Additional Information: The text in Tag <td> tags is left-aligned by default.
Here are some common uses of the <td> tag:
- The <td> tag is used to display data in a table cell. This can include text, numbers, images, links, and other types of content.
- The <td> tag can be used to format table cells with CSS, allowing designers to customize the appearance of table cells. This can include changing the font size, color, background color, and other style properties.
- The <td> tag can include attributes such as rowspan and colspan, which allow cells to span multiple rows or columns in the table. This is useful for displaying data that needs to be grouped or organized in a specific way.
- The <td> tag can be used to add links and buttons to table cells. This is useful for creating interactive tables that allow users to navigate to different pages or perform actions.
- The <td> tag can be used to create responsive tables that adjust to different screen sizes. By setting the width of table cells with CSS, designers can ensure that tables are easy to read and navigate on different devices.
Attributes
Global
The Tag <td> are also compatible with the Global Attributes in HTML.
Event
The Tag td are also compatible with the Event Attributes in HTML.
Attributes List
| Attribute | Value | Overview |
|---|---|---|
| colspan | number | Determines how many columns a cell should have |
| headers | header_id | Indicates which header cells a cell belongs to |
| rowspan | number | Determine how many rows should be displayed in a cell |
Browser Compatibility
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <td> | Yes | Yes | Yes | Yes | Yes |
Predefined CSS
In many browsers, the <td> element will appear with the following default values:
td {
display: table-cell;
vertical-align: inherit;
}Tag Td Advantages
The <td> tag in HTML offers several advantages for displaying and organizing data in a table:
- The <td> tag is easy to use and understand, even for beginner web developers. It is a standard HTML element that is widely supported by all modern web browsers and platforms.
- The <td> tag can be customized with CSS to control the appearance of table cells. This allows designers to create tables that match the look and feel of their website or application.
- The <td> tag can be used to display a wide range of data types, including text, numbers, images, and links. It can also be used to span multiple rows or columns in the table.
- The <td> tag can be used to add links and buttons to table cells, making the table interactive and allowing users to navigate to different pages or perform actions.
- By using the <td> tag to structure data in a table, designers can improve the accessibility of their website or application. Tables that are well-structured with <td> tags are easier to navigate and understand for users with disabilities.
- The <td> tag is an efficient way to display and organize data in a table. It requires less code than other methods, such as using multiple div elements, which can make the page load faster and improve performance.
Do not miss to leave your reaction below as a form of feedback to appreciate our efforts or to suggest us with some improvements for the betterment of this site.
We value your feedback.
+1
+1
+1
+1
+1
+1
+1
