HTML Tag: Syntax, Usage, and Examples

The <th> tag defines a header cell in an HTML table. It labels a row or column so people and assistive technology can understand what each data cell means.

How to Use the Tag

A <th> lives inside a table row (<tr>), just like <td>. The difference is purpose. <th> provides a label, and <td> provides a value.

Here’s the basic pattern for column headers:

<table>
<thead>
<tr>
<thscope="col">Student</th>
<thscope="col">Lessons</th>
<thscope="col">Last active</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amira</td>
<td>7</td>
<td>2026-01-11</td>
</tr>
<tr>
<td>Kenji</td>
<td>3</td>
<td>2026-01-09</td>
</tr>
</tbody>
</table>

Use scope to say what the header labels

The scope attribute tells the browser and screen readers what the header cell applies to:

• scope="col" labels a column.
• scope="row" labels a row.

Row headers look like this:

<table>
<thead>
<tr>
<thscope="col">Plan</th>
<thscope="col">Price</th>
<thscope="col">Support</th>
</tr>
</thead>
<tbody>
<tr>
<thscope="row">Starter</th>
<td>Free</td>
<td>Email</td>
</tr>
<tr>
<thscope="row">Pro</th>
<td>19.99</td>
<td>Chat</td>
</tr>
</tbody>
</table>

A quick mental model helps. If you read a row like a sentence, the row header becomes the subject. “Pro costs 19.99 and includes Chat.”

Combine row and column headers

Some tables have headers on both axes. That’s common in schedules, comparison grids, and reports.

<table>
<thead>
<tr>
<thscope="col">Day</th>
<thscope="col">Topic</th>
<thscope="col">Time</th>
</tr>
</thead>
<tbody>
<tr>
<thscope="row">Mon</th>
<td>Forms</td>
<td>45 min</td>
</tr>
<tr>
<thscope="row">Wed</th>
<td>Tables</td>
<td>40 min</td>
</tr>
</tbody>
</table>

Add spans when a header covers multiple columns or rows

Use colspan and rowspan on <th> when one header should cover more than one column or row.

<table>
<thead>
<tr>
<thscope="col">Name</th>
<thscope="col"colspan="2">Results</th>
</tr>
<tr>
<thscope="col"></th>
<thscope="col">Score</th>
<thscope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sofia</td>
<td>92</td>
<td>Pass</td>
</tr>
</tbody>
</table>

Use spans sparingly. A table with lots of spans can become hard to maintain, and it can confuse assistive tech if the structure gets messy.

Place headers in the right section

Tables often use:

• <thead> for header rows,
• <tbody> for body rows,
• <tfoot> for totals or notes.

This is optional, but it makes tables easier to style and easier to understand.

When to Use the Tag

Use <th> any time your table has labels. Most real tables need them, even if the first version looks “fine” without headers.

1) Help people scan and compare values

A grid of numbers without headers feels like a spreadsheet mystery. Headers give context at a glance.

Common cases:

• pricing tables
• feature comparisons
• leaderboard-style lists
• inventory or order lists

2) Improve accessibility for screen readers

Assistive technology can connect a data cell with its headers, like “Lessons, 7” instead of just “7.” That difference matters, especially in larger tables.

Adding scope usually covers the majority of tables. For more complex tables, you may need advanced techniques, but scope is the best starting point.

3) Support row-based meaning

Row headers are useful when each row represents a “thing” and the first cell names it. Think plans, departments, users, or days of the week. A row header helps readers keep their place while scanning across.

4) Make your table easier to maintain

Headers make the intent obvious. A future teammate can look at the markup and understand what each column represents without guessing.

Examples of the Tag

1) Simple column 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>Accessibility</td>
<td>Intermediate</td>
<td>1.5 hours</td>
</tr>
</tbody>
</table>

2) Row headers for a comparison table

<table>
<thead>
<tr>
<thscope="col">Plan</th>
<thscope="col">Projects</th>
<thscope="col">Certificate</th>
</tr>
</thead>
<tbody>
<tr>
<thscope="row">Starter</th>
<td>3</td>
<td>No</td>
</tr>
<tr>
<thscope="row">Plus</th>
<td>10</td>
<td>Yes</td>
</tr>
</tbody>
</table>

3) Schedule table with both header types

<table>
<caption>Study plan</caption>
<thead>
<tr>
<thscope="col">Day</th>
<thscope="col">Goal</th>
<thscope="col">Time</th>
</tr>
</thead>
<tbody>
<tr>
<thscope="row">Tue</th>
<td>Practice tables</td>
<td>30 min</td>
</tr>
<tr>
<thscope="row">Thu</th>
<td>Build a form</td>
<td>45 min</td>
</tr>
</tbody>
</table>

4) Grouped headers with colspan

<table>
<thead>
<tr>
<thscope="col">Name</th>
<thscope="col"colspan="2">This week</th>
</tr>
<tr>
<thscope="col"></th>
<thscope="col">Commits</th>
<thscope="col">Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jordan</td>
<td>12</td>
<td>5</td>
</tr>
<tr>
<td>Priya</td>
<td>8</td>
<td>7</td>
</tr>
</tbody>
</table>

5) Styling headers differently from data cells

Browsers render <th> as bold and centered by default, but you can control the look with CSS.

<style>
table {
border-collapse: collapse;
width:100%;
  }
th,td {
border:1px solid#ccc;
padding:10px;
text-align: left;
  }
theadth {
background:#f4f4f4;
  }
</style>

<table>
<thead>
<tr>
<thscope="col">Issue</th>
<thscope="col">Priority</th>
<thscope="col">Owner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Broken link</td>
<td>High</td>
<td>Leila</td>
</tr>
</tbody>
</table>

Learn More About the Tag

vs

A quick rule that saves time:

• <th> labels something.
• <td> contains the data.

If a cell answers “what is this column or row about,” use <th>. If a cell answers “what is the value,” use <td>.

Use <caption> for table context

A caption explains what the table represents. That helps everyone, and it’s a nice accessibility upgrade.

<table>
<caption>Monthly signups</caption>
<thead>
<tr>
<thscope="col">Month</th>
<thscope="col">Signups</th>
</tr>
</thead>
<tbody>
<tr>
<thscope="row">Jan</th>
<td>1200</td>
</tr>
</tbody>
</table>

Sorting tables and header buttons

Interactive tables often allow sorting by clicking a header. The header cell can contain a button, as long as it stays understandable.

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

If you do this, make the button label clear and keep focus styles visible. People should be able to sort without a mouse.

Header associations in complex tables

Some tables have multiple header levels, like “Results” covering “Score” and “Status.” scope and colspan handle many cases, but really complex layouts might need explicit header associations using id and headers.

Here’s the idea:

• Give header cells id values.
• Point each data cell to the relevant header ids with headers.

<table>
<thead>
<tr>
<thid="h-name"scope="col">Name</th>
<thid="h-score"scope="col">Score</th>
</tr>
</thead>
<tbody>
<tr>
<tdheaders="h-name">Amina</td>
<tdheaders="h-score">95</td>
</tr>
</tbody>
</table>

Many projects never need this, but it’s good to know it exists.

Common mistakes to avoid

Skipping headers because the table “looks obvious”

People may still struggle to scan the data, and screen readers lose critical context.

Using <th> just for bold text

Use CSS for styling. Use <th> for meaning.

Forgetting scope

A browser can guess some relationships, but scope makes your intent clear and improves accessibility.

Summary

The <th> tag gives your tables structure and meaning. Use it to label columns and rows, add scope so headers connect to data, and combine it with <caption>, <thead>, and <tbody> for readable, accessible tables.