Table Header (th)

The <th> element (table header) marks a cell as a label for a row or column, rather than a plain data value — the difference matters far more than its default bold styling suggests.

Syntax

<tr>
    <th scope="col">Column Header</th>
</tr>

Basic Example

<tr>
    <th scope="col">Student</th>
    <th scope="col">Math</th>
    <th scope="col">Science</th>
</tr>

Browser output: bold, center-aligned text by default — a visual distinction from ordinary <td> cells, but the real value is what scope tells assistive technology, not the styling.

How It Works

<th> can label either a column (usually the first row of a table) or a row (usually the first cell of each row). The scope attribute makes that relationship explicit rather than leaving the browser to guess from position alone.

Important Attributes

Real-World Example

<table>
    <tr>
        <th scope="col">Student</th>
        <th scope="col">Math</th>
    </tr>
    <tr>
        <th scope="row">Aman</th>
        <td>92</td>
    </tr>
</table>

Both a column header ("Math") and a row header ("Aman") in the same table — a screen reader can now announce "Aman, Math: 92" correctly, using both headers together.

Common Mistakes

• Using <th> purely to get bold text styling on a cell that isn't actually a header — that's a job for CSS font-weight
• Omitting the scope attribute — browsers can often infer row vs column headers from position, but explicit scope is far more reliable, especially in complex tables

Best Practices

• Always include scope="col" or scope="row" on every <th>
• Use <th> for genuine labels only — never purely for its default bold appearance

Accessibility Considerations

This is one of the highest-impact accessibility details in table markup — without correct <th>/scope usage, a screen reader user navigating a large table has no reliable way to know which row or column a given cell belongs to.

SEO Considerations

Clear header structure helps search engines correctly parse and potentially surface table data in rich results.

Browser & Modern HTML Notes

The scope attribute has been supported for a long time across all modern browsers and remains the recommended, simplest way to associate headers with data in most tables — the more complex headers/id pairing is reserved for genuinely irregular tables.

Mini Practice

1. Add correct scope="col" headers to a 3-column table.
2. Extend that same table with a scope="row" header for each row.

Related HTML Notes

• table-cell
• accessible-tables
• thead