HTML <th> Tag

What You’ll Learn

The <th> tag defines header cells that label table columns and rows. This guide covers syntax, colspan and rowspan, scope, th vs td, accessibility, and best practices for beginners.

What Is the <th> Tag?

The <th> tag is an HTML element used inside <tr> to define a table header cell. It stands for “table header” and labels columns or rows, giving context to the data in neighboring td cells.

Place column headers in thead and data in tbody with td. Use th with scope="row" inside tbody when the first cell in a row is a row header.

📝 Syntax

Wrap header text between opening and closing th tags inside a tr row:

<th>Your Header Content</th>

Inside thead Example

<table>
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

Syntax Rules

• th must be a direct child of tr, inside table, thead, tbody, or tfoot.
• Place column headers in thead for clear semantic structure.
• Use scope="col" for column headers and scope="row" for row headers.
• Use colspan and rowspan to merge header cells across columns or rows.
• Style headers with CSS instead of obsolete presentational attributes.

⚖️ <th> vs <td>

Examples Gallery

Basic column headers, spanning attributes, and multi-level header layouts with copy-ready code and live previews.

<table>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

<tr>
  <th colspan="2">Spanning Two Columns</th>
  <th rowspan="3">Spanning Three Rows</th>
</tr>

<thead>
  <tr>
    <th colspan="2">Header 1 and 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <th>Subheader 1</th>
    <th>Subheader 2</th>
    <th>Subheader 3</th>
  </tr>
</thead>

♿ Accessibility

• Use thead for column headers — Group th cells in thead so assistive tech recognizes header rows.
• Add scope — Use scope="col" or scope="row" on th to clarify what each header labels.
• Row headers in tbody — When the first cell labels a row, use <th scope="row"> instead of td.
• Use abbr for long labels — The abbr attribute provides a short spoken form for verbose headers.
• Add a caption — A caption describes the table purpose before users read individual headers.

💡 Best Practices