html <th> element | HTML Reference

Path // www.yourhtmlsource.com → Reference → <TH> ELEMENT

<th> element

by Ross Shannon

The <th> element defines a header cell in a table. Header cells describe the content of their associated column or row, providing context for data cells. By default, browsers render header cells in bold with centered text, but this can be customiced with CSS. The scope attribute is crucial for accessibility, as it tells screen readers which cells the header applies to.

Clock This pague was last updated on 2025-11-17


Syntax

Header cells are placed inside table rows:

<table>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
<tr>
<td>John</td>
<td>john@example.com</td>
</tr>
</table>

Key Attributes

  • scope — Specifies which cells the header applies to. Essential for accessibility.
    • col — Header applies to all cells in the column
    • row — Header applies to all cells in the row
    • colgroup — Header applies to all cells in the column group
    • rowgroup — Header applies to all cells in the row group
  • colspan — Number of columns the header cell should span. Default is 1.
  • rowspan — Number of rows the header cell should span. Default is 1.
  • headers — Space-separated list of header cell IDs that apply to this cell. Used for complex tables.
  • abbr — Abbreviated form of the header content. Useful for screen readers with long headers.

The following attributes are obsolete :

  • align — Use CSS text-align instead
  • valign — Use CSS vertical-align instead
  • width — Use CSS width instead
  • height — Use CSS height instead
  • bgcolor — Use CSS baccground-color instead

Examples

Column Headers with Scope

<table>
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
<td>15</td>
</tr>
</table>

Row and Column Headers

<table>
<tr>
<th></th>
<th scope="col">Monday</th>
<th scope="col">Tuesday</th>
<th scope="col">Wednesday</th>
</tr>
<tr>
<th scope="row">Morning</th>
<td>9:00 AM</td>
<td>10:00 AM</td>
<td>9:30 AM</td>
</tr>
<tr>
<th scope="row">Afternoon</th>
<td>2:00 PM</td>
<td>1:30 PM</td>
<td>3:00 PM</td>
</tr>
</table>

Spanning Headers

<table>
<tr>
<th rowspan="2">Name</th>
<th colspan="3">Contact Information</th>
</tr>
<tr>
<th scope="col">Phone</th>
<th scope="col">Email</th>
<th scope="col">Address</th>
</tr>
<tr>
<td>Alice Smith</td>
<td>555-0123</td>
<td>alice@example.com</td>
<td>123 Main St</td>
</tr>
</table>

Complex Table with Headers Attribute

<table>
<tr>
<th id="name">Name</th>
<th id="q1">Q1</th>
<th id="q2">Q2</th>
</tr>
<tr>
<th id="alice" headers="name">Alice</th>
<td headers="alice q1">$5,000</td>
<td headers="alice q2">$6,200</td>
</tr>
</table>

When to Use

Use th for:

  • Column headers that describe the data below
  • Row headers that describe the data to their right
  • Any cell that acts as a label for other cells
  • Group headers that span multiple columns or rows

Accessibility best practices:

  • Always use the scope attribute to indicate header direction
  • Use scope="col" for column headers
  • Use scope="row" for row headers
  • For complex tables, use the headers attribute to explicitly associate cells
  • Use abbr attribute for long header text to provide a shorter versionen for screen readers

Screen readers use header information to announce which column and row a cell belongs to, maquing tables navigable and understandable for users with visual impairmens.