Table of contents

HTML <td> Tag

What is HTML <td> Tag?

The HTML td tag is used to define a single cell of data in an HTML table. The td stands for “table data,” and it holds the actual content inside a table row. Each table cell created using the td tag is contained within a tr (table row) tag. This tag is important because it structures tabular data in a clear and organized way. It is widely used for displaying data in tables such as schedules, pricing lists, comparison charts, and reports. The HTML td tag helps browsers and users interpret data correctly.

Syntax of the HTML <td> Tag

plaintext
<td>Table Cell Content</td>

The td tag defines a table cell that can contain text, links, images, or other HTML elements. It must always be used inside a tr tag, which in turn should be placed inside a table tag.

Examples of HTML <td> Tag

Example 1: Basic HTML Table Using <td>

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<table border="1">
  <tr>
    <td>Country</td>
    <td>Capital</td>
  </tr>
  <tr>
    <td>India</td>
    <td>New Delhi</td>
  </tr>
</table>

</body>
</html>

In this example, each td tag represents one table cell. The table displays two columns: Country and Capital.

Example 2: SEO Optimized Table with Scholar247

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<h2>Top Courses and Fees - Scholar247</h2>

<table border="1">
  <tr>
    <td>Course</td>
    <td>Duration</td>
    <td>Fee (USD)</td>
  </tr>
  <tr>
    <td>Web Development</td>
    <td>6 Months</td>
    <td>500</td>
  </tr>
  <tr>
    <td>Data Science</td>
    <td>8 Months</td>
    <td>750</td>
  </tr>
</table>

</body>
</html>

This example shows how the HTML td tag can be used to display structured course information. The use of meaningful headings like “Top Courses and Fees — Scholar247” makes the table SEO-friendly and relevant to search engines.

Attributes of the HTML <td> Tag

The HTML td tag supports several attributes that control the appearance and behavior of table cells:

• colspan: Specifies the number of columns a cell should span.
• rowspan: Specifies the number of rows a cell should span.
• headers: Associates a cell with one or more header cells.
• align: Defines horizontal alignment of cell content (left, right, center).
• valign: Defines vertical alignment (top, middle, bottom).
• bgcolor: Sets background color of the cell (deprecated but still seen in older code).

Best Practices for HTML <td> Tag

• Always use td inside tr and table tags to maintain correct structure.
• Use th tags for header cells instead of td for better accessibility.
• Avoid using inline styling; use CSS for cleaner and responsive design.
• Keep data in td cells meaningful and concise.
• Use colspan and rowspan carefully for improved layout and readability.

FAQs About the HTML <td> Tag

What is the purpose of the HTML td tag?

The td tag defines individual cells in a table that display actual data. It helps organize content in rows and columns.

Can I use HTML td tag outside of a table?

No. The td tag must always be used inside a tr (table row) tag, which itself must be inside a table tag.

What is the difference between td and th tags?

The td tag represents standard table data, while the th tag represents a table header cell that is usually bold and centered.

Does the HTML td tag support attributes like colspan and rowspan?

Yes. You can use colspan to make a cell span multiple columns and rowspan to make it span multiple rows.

Yes. You can include any HTML content like images, links, text, or buttons inside a td tag.

HTML

Related Articles