HTML <td> td tag
The <td> tag in HTML is used to define a table data cell within a table. It represents a cell in a table row (<tr>) and is used to display data or content within the table.
Key Features:
- Table Data: Encapsulates the content of a cell within a row of a table.
- Default Styling: By default, table cells have padding and borders, and they align text to the left.
- Content Types: Can contain various types of content, including text, images, links, forms, and other HTML elements.
Basic Syntax:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
In this example:
- The
<td>tags define individual cells in a table row, with each cell containing text.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TD Tag Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f4f4f4;
}
</style>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
<tr>
<td>Carol</td>
<td>28</td>
<td>Chicago</td>
</tr>
</table>
</body>
</html>
In this example:
- Each
<td>tag represents a data cell in the table, containing information like names, ages, and cities.
Attributes:
colspan: Specifies the number of columns a cell should span. For example,<td colspan="2">makes the cell span two columns.rowspan: Specifies the number of rows a cell should span. For example,<td rowspan="2">makes the cell span two rows.headers: Associates a cell with a header cell by specifying the IDs of<th>elements. This helps with accessibility.
Example with Attributes:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>Alice</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td colspan="2">Los Angeles</td> <!-- This cell spans two columns -->
</tr>
<tr>
<td>Carol</td>
<td>28</td>
<td>Chicago</td>
</tr>
</table>
In this example:
- The
<td>cell withcolspan="2"spans two columns.
Styling and Use Cases:
- Styling: Use CSS to style
<td>elements, such as adjusting padding, borders, and text alignment. - Content:
<td>can contain any valid HTML content, including text, images, and other elements, allowing for flexible table designs.
Key Points:
- Purpose: The
<td>tag defines a cell in a table row, used to display data or content. - Attributes:
colspanandrowspanallow cells to span multiple rows or columns. - Styling: Use CSS to control the appearance of table cells, including borders, padding, and alignment.
In summary, the <td> tag in HTML is crucial for defining and displaying table data cells. It allows for flexible content inclusion and can be styled and adjusted using various attributes and CSS rules