HTML td Table Tag – A Complete Guide for Beginners

Introduction: What Is the <td> Tag in HTML Tables?

HTML tables display information in a grid format made of:

  • Rows

  • Columns

  • Cells

The actual data inside a table (names, numbers, values) is placed using the HTML <td> tag.

If <tr> creates rows and <th> creates headings, then <td> holds the real data.

This guide explains the <td> tag in a clear, beginner-friendly, teacher-style way with examples and best practices.

What Is the HTML td Tag?

The HTML <td> tag stands for Table Data.

In simple words:
<td> is used to define a data cell inside a table row.

Each <td> represents one column value in a row.

Basic Syntax of <td> Tag

 
<td>Table Data</td>

 

Key Points

  • <td> is a paired (container) tag

  • It must be placed inside a <tr>

  • <tr> must be inside a <table>

Simple Example: Table Using td

<table border="1">
  <tr>
    <td>Aman</td>
    <td>22</td>
  </tr>
</table>

Explanation

  • <tr> → creates one row

  • Two <td> → create two columns (cells)

  • Cells contain actual data

Using td with th (Most Common Table Structure)

<table border="1">
  <tr>
    <th>Name</th>
    <th>Marks</th>
  </tr>
  <tr>
    <td>Neha</td>
    <td>92</td>
  </tr>
  <tr>
    <td>Aman</td>
    <td>88</td>
  </tr>
</table>

How It Works

  • <th> → headings

  • <td> → data under each heading

  • Each <td> aligns with its column header

Important Rule: Where td Must Be Used

Correct:

<table>
  <tr>
    <td>Data</td>
  </tr>
</table>

Incorrect:

<td>Data</td>

<td> cannot exist alone.
It must be inside <tr> → inside <table>.

Using td Inside thead, tbody, tfoot

<table border="1">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Pen</td>
      <td>10</td>
    </tr>
    <tr>
      <td>Book</td>
      <td>50</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td>Total</td>
      <td>60</td>
    </tr>
  </tfoot>
</table>

Attributes of td Tag

1. colspan – Merge Columns

 
<td colspan="2">Total</td>

Example

 
<tr> <td colspan="2">Total Marks</td> </tr>

Cell spans two columns.

2. rowspan – Merge Rows

 
<td rowspan="2">Math</td>

Example

 
<tr> <td rowspan="2">Science</td> <td>Physics</td> </tr> <tr> <td>Chemistry</td> </tr>

Cell spans two rows.

Styling <td> with CSS

Change Background Color

 
td {
background-color: #f8f9fa;
}

Add Border and Padding

 
td {
border: 1px solid #000;
padding: 10px;
}

Align Text Inside <td>

 
td {
text-align: center;
vertical-align: middle;
}

td vs th (Quick Comparison)

TagPurpose
<td>Table data (values)
<th>Table headers (labels)

<td> = data
<th> = description of data

HTML td Tag and SEO

  • Helps search engines understand tabular data

  • Improves clarity and content structure

  • Indirect SEO benefit through clean HTML

Common Beginner Mistakes

  • Using <td> for headers instead of <th>
  • Placing <td> outside <tr>
  • Forgetting colspan / rowspan alignment
  • Using <br> instead of table rows
  • Styling tables using HTML attributes

Real-World Example: Employee Table

<table border="1">
  <tr>
    <th>Employee</th>
    <th>Department</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Ravi</td>
    <td>HR</td>
    <td>45000</td>
  </tr>
  <tr>
    <td>Neha</td>
    <td>IT</td>
    <td>52000</td>
  </tr>
</table>

FAQs: HTML Tag

What does <td> stand for?

Table Data.

Can <td> be used without <tr>?

No.

Can <td> span multiple rows or columns?

Yes, using rowspan and colspan.

Is <td> deprecated?

No, it is fully supported in HTML5.

Can I style <td> with CSS?

Yes, completely.