What is the difference between and ?

defines standard data cells, while defines header cells. Header cells are bold and centered by default.

Can I style a tag using CSS?

Yes, you can apply CSS styles to using inline styles or external CSS files.

Is the tag supported in all browsers?

Yes, all modern browsers support the tag, ensuring compatibility across platforms.

Table of contents

Introduction

What is the `<td>` Tag?

Syntax of <td> Tag

Example:

Types of Cells in Tables

Example with Both Cell Types:

Attributes of <td> Tag

7.1.

1. colspan: Merges multiple columns into one.

7.2.

2. rowspan: Merges multiple rows into one.

7.3.

3. align: Aligns the content horizontally. (Deprecated in HTML5; use CSS instead.)

7.4.

4. valign: Aligns the content vertically. (Deprecated in HTML5; use CSS instead.)

7.5.

5. `width` & `height`

Examples of <td> Tag

8.1.

Example 1: Simple Table with Customized Cells

8.2.

Example 2: Adding Inline Styles

Supported Browsers

10.

Frequently Asked Questions

10.1.

What is the difference between <td> and <th>?

10.2.

Can I style a <td> tag using CSS?

10.3.

Is the <td> tag supported in all browsers?

11.

Conclusion

Last Updated: Jan 5, 2025

Easy

<td> Tag in HTML

Author Sinki Kumari

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

The <td> tag in HTML is used to define table data, representing a cell within a table row. It plays a crucial role in organizing and displaying data systematically on web pages.

This article will discuss the syntax, types of cells, attributes, and examples of the <td> tag, making it simple for beginners to create well-structured tables.

What is the `<td>` Tag?

The `<td>` tag is an HTML element used to create a standard data cell within a table. It stands for "table data" & is always nested inside a `<tr>` (table row) tag. Each `<td>` represents a single cell in a row, & the content inside it can be text, images, links, or even other HTML elements.

For example, if you’re creating a table to display student marks, each cell containing a student’s score would be defined using the `<td>` tag. For example:

<table>
  <tr>
    <td>John</td>
    <td>85</td>
  </tr>
  <tr>
    <td>Jane</td>
    <td>90</td>
  </tr>
</table>

In this code, the `<td>` tags are used to define the cells for student names & their marks. The `<tr>` tags create rows, & each row contains two `<td>` elements.

Note: The `<td>` tag is very useful for structuring data in a tabular format. Without it, tables wouldn’t be able to display information in an organized way. It’s a simple yet powerful tool that forms the foundation of HTML tables.

Syntax of <td> Tag

The <td> tag is used inside a <tr> tag (table row) and is a child of the <table> element. The basic syntax is:

<table>
  <tr>
    <td>Cell Content</td>
  </tr>
</table>

Opening Tag: <td>
Closing Tag: </td>
Content: The data displayed in the cell.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table with Border</title>
</head>
<body>
    <h1>Sample Table</h1>
    <table border="1">
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

Output:

Types of Cells in Tables

Header Cells (<th>): Represent headings or titles of rows or columns. Text inside <th> is bold and centered by default.
Data Cells (<td>): Contain the main content or data of the table. Text inside <td> is left-aligned by default.

Example with Both Cell Types:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table Example</title>
</head>
<body>
    <h1>Product Price List</h1>
    <table border="1">
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>Apple</td>
            <td>$1</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$0.5</td>
        </tr>
    </table>
</body>
</html>

Output:

Attributes of <td> Tag

The <td> tag comes with several attributes to customize the cell’s appearance and behavior:

1. colspan: Merges multiple columns into one.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table with Merged Columns</title>
</head>
<body>
    <h1>Table with Merged Columns</h1>
    <table border="1">
        <tr>
            <td colspan="2">Merged Columns</td>
        </tr>
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
    </table>
</body>
</html>

Output:

2. rowspan: Merges multiple rows into one.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table with Merged Rows</title>
</head>
<body>
    <h1>Table with Merged Rows</h1>
    <table border="1">
        <tr>
            <td rowspan="2">Merged Rows</td>
            <td>Row 1, Column 2</td>
        </tr>
        <tr>
            <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

Output:

3. align: Aligns the content horizontally. (Deprecated in HTML5; use CSS instead.)

<td align="center">Centered Text</td>

4. valign: Aligns the content vertically. (Deprecated in HTML5; use CSS instead.)

<td valign="top">Top Aligned Text</td>

5. `width` & `height`

These attributes define the width & height of the cell. However, it’s better to use CSS for styling purposes, as these attributes are deprecated in HTML5.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Table with Specific Dimensions</title>
</head>
<body>
   <table border="1">
       <tr>
           <td width="100" height="50">Cell with specific dimensions</td>
       </tr>
   </table>
</body>
</html>

Output

Examples of <td> Tag

Example 1: Simple Table with Customized Cells

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Table with Merged Row</title>
</head>
<body>
    <h1>Table with Merged Row</h1>
    <table border="1">
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
        </tr>
        <tr>
            <td>John</td>
            <td>25</td>
            <td rowspan="2">New York</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>22</td>
        </tr>
    </table>
</body>
</html>

Output:

Example 2: Adding Inline Styles

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled Table</title>
</head>
<body>
    <h1>Styled Table Example</h1>
    <table border="1">
        <tr>
            <td style="color: red;">Red Text</td>
            <td style="background-color: yellow;">Yellow Background</td>
        </tr>
    </table>
</body>
</html>

Output:

Supported Browsers

The <td> tag is universally supported by all modern web browsers, including:

Browser	Support
Google Chrome	Yes
Firefox	Yes
Safari	Yes
Edge	Yes
Opera	Yes

There’s no compatibility issue with the <td> tag, making it reliable for web development.

Frequently Asked Questions

What is the difference between <td> and <th>?

<td> defines standard data cells, while <th> defines header cells. Header cells are bold and centered by default.

Can I style a <td> tag using CSS?

Yes, you can apply CSS styles to <td> using inline styles or external CSS files.

Is the <td> tag supported in all browsers?

Yes, all modern browsers support the <td> tag, ensuring compatibility across platforms.

Conclusion

In this article, we discussed the <td> tag, its syntax, and its features for defining table data in HTML. We also learned how to use its attributes, create various cell types, and saw practical examples of merging cells and styling them. The <td> tag is an essential tool for structuring data in web applications.

You can also check out our other blogs on Code360.

Live masterclass

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

519+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

436+ registered

SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls

by Shantanu Shubham

21 May, 2025

01:30 PM

325+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

22 May, 2025

01:30 PM

314+ registered

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

519+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

436+ registered

View more events