HTML Tag: Syntax, Usage, and Examples

The <td> tag defines a data cell inside an HTML table. You place it inside a table row to display values like names, prices, dates, or any other data.

How to Use the Tag

A <td> cell always lives inside a <tr> row, and that row lives inside a <table>. Most tables also use <thead>, <tbody>, and <tfoot> to separate the header, body, and footer.

Here’s the basic structure:

<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 real projects, you usually add headers with <th>:

<table>
<thead>
<tr>
<thscope="col">Name</th>
<thscope="col">Status</th>
<thscope="col">Last login</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amira</td>
<td>Active</td>
<td>2026-01-09</td>
</tr>
<tr>
<td>Kenji</td>
<td>On break</td>
<td>2026-01-11</td>
</tr>
</tbody>
</table>

What a data cell represents

A data cell holds one value in the table. A simple way to picture it is “one row equals one record,” and each <td> is one field in that record.

What you can put inside a cell

A <td> can contain plain text, but it can also include other HTML elements such as links, buttons, icons, or even small form controls.

<td>
<ahref="/profile/amira">View profile</a>
</td>

If a cell starts to contain a whole layout with multiple sections, a table might be the wrong choice. CSS Grid or Flexbox usually fits better for layout.

Helpful attributes on

Two attributes show up a lot:

• colspan lets a cell span multiple columns.
• rowspan lets a cell span multiple rows.

Example with colspan:

<tr>
<tdcolspan="3">No results found.</td>
</tr>

Example with rowspan:

<tr>
<tdrowspan="2">Frontend</td>
<td>Accessibility basics</td>
</tr>
<tr>
<td>CSS layout</td>
</tr>

Use spans on purpose. Too many of them can make a table hard to maintain.

Styling a cell

Use CSS for alignment, spacing, and typography. Numeric columns often read better when right-aligned.

<style>
.money {
text-align: right;
font-variant-numeric: tabular-nums;
  }
</style>

<tdclass="money">49.99</td>

When to Use the Tag

Use <td> when you’re displaying structured data that people will scan across columns and down rows. Tables work best when the data has a clear “header plus values” relationship.

1) Comparing values across rows

Tables shine when people compare multiple items using the same fields.

Examples:

• Pricing lists (plan, price, limits)
• Student progress (name, lessons completed, last activity)
• Inventory (item, stock, location)

Each comparable value belongs in its own <td>.

2) Reporting and summaries

Reports often need consistent alignment.

Examples:

• Monthly metrics (month, signups, revenue)
• Bug lists (issue, priority, status)
• Support queues (ticket, owner, age)

A clean table layout helps your eyes land on the right column fast.

3) Accessibility-friendly data relationships

Screen readers can announce tables in a structured way, especially when headers use <th> and the table is organized properly. That helps people understand what each data value refers to.

4) Row-based actions

Tables often include an “Actions” column where each row has buttons like “Edit,” “View,” or “Download.” A <td> is the right place for those controls because the action belongs to the row’s record.

Examples of the Tag

1) Basic table with headers

<table>
<thead>
<tr>
<thscope="col">Course</th>
<thscope="col">Level</th>
<thscope="col">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>HTML Basics</td>
<td>Beginner</td>
<td>2 hours</td>
</tr>
<tr>
<td>CSS Layout</td>
<td>Intermediate</td>
<td>3 hours</td>
</tr>
</tbody>
</table>

2) Right-aligned numeric columns

<style>
table {
border-collapse: collapse;
width:100%;
  }

th,td {
border:1px solid#ccc;
padding:10px;
  }

.num {
text-align: right;
font-variant-numeric: tabular-nums;
  }
</style>

<table>
<thead>
<tr>
<thscope="col">Item</th>
<thscope="col"class="num">Qty</th>
<thscope="col"class="num">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Notebook</td>
<tdclass="num">2</td>
<tdclass="num">6.00</td>
</tr>
<tr>
<td>Pen</td>
<tdclass="num">15</td>
<tdclass="num">1.50</td>
</tr>
</tbody>
</table>

3) Empty state row with colspan

<table>
<thead>
<tr>
<thscope="col">Ticket</th>
<thscope="col">Owner</th>
<thscope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<tdcolspan="3">No tickets in the queue.</td>
</tr>
</tbody>
</table>

4) Cells with links and buttons

<table>
<thead>
<tr>
<thscope="col">Student</th>
<thscope="col">Progress</th>
<thscope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><ahref="/students/amira">Amira</a></td>
<td>7 lessons</td>
<td><buttontype="button">Send reminder</button></td>
</tr>
<tr>
<td><ahref="/students/kenji">Kenji</a></td>
<td>3 lessons</td>
<td><buttontype="button">Send reminder</button></td>
</tr>
</tbody>
</table>

5) Grouped rows using rowspan

<table>
<thead>
<tr>
<thscope="col">Track</th>
<thscope="col">Lesson</th>
<thscope="col">Length</th>
</tr>
</thead>
<tbody>
<tr>
<tdrowspan="2">Frontend</td>
<td>Forms</td>
<td>35 min</td>
</tr>
<tr>
<td>Tables</td>
<td>40 min</td>
</tr>
<tr>
<tdrowspan="2">Backend</td>
<td>APIs</td>
<td>45 min</td>
</tr>
<tr>
<td>Databases</td>
<td>50 min</td>
</tr>
</tbody>
</table>

Learn More About the Tag

vs

A simple rule:

• Use <th> for header cells that label other cells.
• Use <td> for the actual data values.

Headers can label columns:

<thscope="col">Price</th>

Headers can also label rows:

<tr>
<thscope="row">Total</th>
<tdclass="num">7</td>
<tdclass="num">7.50</td>
</tr>

Add a caption for context

A <caption> gives a table a title that explains what the data represents.

<table>
<caption>Weekly study plan</caption>
<thead>
<tr>
<thscope="col">Day</th>
<thscope="col">Topic</th>
<thscope="col">Time</th>
</tr>
</thead>
<tbody>
<tr>
<thscope="row">Mon</th>
<td>HTML forms</td>
<td>45 min</td>
</tr>
</tbody>
</table>

Keep tables readable and accessible

A few habits go a long way:

• Use <thead> and <tbody> for structure when the table is more than a couple of rows.
• Use scope="col" and scope="row" on <th> when possible.
• Keep button and link text specific, like “Edit Kenji” instead of “Edit.”
• Use right alignment for numbers so columns line up.

Common mistakes to avoid

Using tables for layout

A table should represent data. Use CSS layout tools for page structure.

Missing headers

Tables without headers are harder to scan and harder for assistive tech to interpret.

Inconsistent cell counts

If most rows have three cells, keep that pattern. Use colspan intentionally when a row needs to span across columns.

Summary

The <td> tag is the standard way to represent table data in HTML. Place <td> inside <tr>, pair it with headers using <th>, and use colspan or rowspan when a cell needs to span multiple columns or rows.