HTML <td> Tag

The HTML <td> tag stands for Table Data, and it is used to define individual cells in a table row. These cells can hold various types of content, including text, images, links, and other HTML elements. The <td> tag is a fundamental part of building HTML tables, ensuring that data is displayed in a structured and organized manner.

HTML tables are widely used for displaying tabular data, making the <td> tag essential for web developers to create meaningful and readable tables. The <td> tag is used within the <tr> (table row) element to define the actual data content for each table row. The tag helps improve the overall presentation of data on the web.

Syntax of the <td> Tag

The basic syntax of the <td> tag is straightforward and is used inside the <table> and <tr> tags. Here’s the standard syntax:

html
<td>Cell Content</td>

The <td> element can contain any valid HTML content, such as text, images, links, or even other HTML elements like lists.

html
<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>
</table>

In this example, each <td> tag defines a cell within the table structure.

Attributes of the <td> Tag

The HTML <td> tag supports several attributes that can modify the appearance and behavior of the table data cells. Here’s a list of common attributes:

AttributeDescription
colspanSpecifies how many columns the cell should span.
rowspanSpecifies how many rows the cell should span.
headersAssociates the cell with header cells in the table, improving accessibility.
alignSpecifies the alignment of content inside the cell (deprecated in HTML5).
valignSpecifies vertical alignment of the content (deprecated in HTML5).
styleAllows inline CSS styling to customize the appearance of the table cell.
bgcolorSpecifies the background color of the cell (deprecated in HTML5, use CSS instead).

Example of Common Attributes

Colspan Example

html
<table>
  <tr>
    <td colspan="2">This cell spans 2 columns</td>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

Rowspan Example

html
<table>
  <tr>
    <td rowspan="2">This cell spans 2 rows</td>
    <td>Cell 1</td>
  </tr>
  <tr>
    <td>Cell 2</td>
  </tr>
</table>

Examples of HTML <td> Tag

Example 1: Basic Table with Data Cells.

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Basic Table Example</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>First Name</td>
            <td>Last Name</td>
        </tr>
        <tr>
            <td>John</td>
            <td>Doe</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>Smith</td>
        </tr>
    </table>
</body>
</html>

In this example, each <td> tag represents a table cell containing text such as "First Name," "Last Name," and other data.

Example 2: Using Colspan and Rowspan in Table Data Cells

html
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Colspan and Rowspan Example</title>
</head>
<body>
    <table border="1">
        <tr>
            <td colspan="2">This cell spans 2 columns</td>
        </tr>
        <tr>
            <td rowspan="2">This cell spans 2 rows</td>
            <td>Cell 1</td>
        </tr>
        <tr>
            <td>Cell 2</td>
        </tr>
    </table>
</body>
</html>

This example illustrates how the colspan and rowspan attributes modify the table structure by spanning cells across multiple rows and columns.

FAQs About HTML <td> Tag

Q1: What is the purpose of the HTML <td> tag?
A: The <td> tag is used to define individual cells in a table row, holding data like text, images, or links in an organized, tabular structure.

Q2: Can the <td> tag contain other HTML elements?
A: Yes, the <td> tag can contain various HTML elements, such as images, links, or even other tables, allowing for rich content within a table cell.

Q3: What is the difference between the <td> and <th> tags?
A: The <td> tag defines standard data cells in a table, while the <th> tag defines header cells, which are typically styled differently and used to provide context to data cells.

Q4: How does the colspan attribute affect a table?
A: The colspan attribute allows a table cell to span multiple columns, combining them into one larger cell.

Q5: Is the bgcolor attribute still used in modern HTML for <td> tags?
A: No, the bgcolor attribute is deprecated in HTML5. Instead, it's recommended to use CSS for styling, such as setting the background color of a cell.

tools

HTML

Related Articles