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.

The <td> element is one of the core building blocks of HTML tables because it holds the actual values people read in each row.

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>

Those header cells are often called <th> elements, and they help explain what each value in the row means.

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.

When several rows line up under the same headers, the page becomes much easier to scan because the table cells all follow the same pattern.

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>

That feature is controlled by the colspan attribute, which is useful when one message needs to stretch across the whole row.

Example with rowspan:

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

This uses the rowspan attribute to let one cell cover more than one row.

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>

Properties like text-align or padding are examples of CSS properties you can apply to make table data easier to read.

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.

Clear table headers matter here because they connect each value to the label above or beside it.

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.

This pattern shows up in dashboards, admin panels, and learning tutorials where each row links to a lesson or task.

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>

These simple CSS styles help numbers line up cleanly so columns are easier to compare.

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.

Using old presentational HTML

Older HTML examples sometimes use attributes like bgcolor or nowrap directly on cells. They still appear in legacy code, but modern projects should usually use CSS instead.

For example, older code might set a cell background color with bgcolor, while modern code would use CSS for the same job.

You might also see vertical-align used to control how content sits inside taller cells, especially when rows contain icons, buttons, or mixed-height content.

All of that is part of table formatting, but today it is usually cleaner to manage it with CSS rather than old HTML attributes.

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.