thead

Reference Table Used in This Section

Several notes below build on this same example — a simple student marks table:

<table>
    <caption>Semester 1 Results</caption>
    <thead>
        <tr>
            <th>Student</th>
            <th>Math</th>
            <th>Science</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Aman</td>
            <td>92</td>
            <td>88</td>
        </tr>
        <tr>
            <td>Priya</td>
            <td>85</td>
            <td>91</td>
        </tr>
    </tbody>
</table>

What thead Is For

The <thead> element groups a table's header row(s) into a distinct section — separate from the actual data rows in <tbody>.

Syntax

<table>
    <thead>
        <tr><th>Header</th></tr>
    </thead>
    <tbody>
        <tr><td>Data</td></tr>
    </tbody>
</table>

How It Works

Grouping rows into <thead>/<tbody>/<tfoot> is optional for a table to render correctly, but it adds real structural meaning: it tells the browser (and any styling or scripting) exactly which rows are headers, which are data, and which are summary — see the reference table above.

Important Attributes

Real-World Example

<table>
    <thead>
        <tr><th>Plan</th><th>Price</th><th>Support</th></tr>
    </thead>
    <tbody>
        <tr><td>Basic</td><td>₹999</td><td>Email</td></tr>
        <tr><td>Pro</td><td>₹2,499</td><td>Priority</td></tr>
    </tbody>
</table>

A pricing table with a clean split between the header row and the plan data — the kind of structure that also makes CSS like "sticky headers while scrolling" straightforward to implement.

Common Mistakes

• Putting header <tr> content loose at the top of <table> without wrapping it in <thead> — it still works visually, but loses the semantic grouping
• Placing more than one <thead> in a single table — only one is allowed

Best Practices

• Always group header rows in <thead> for any table beyond a trivially small one
• Use it together with <tbody> for a clean, explicit table structure

Accessibility Considerations

Some assistive technology and browser features (like keeping headers visible while scrolling a long table) rely specifically on this explicit sectioning to work correctly.

SEO Considerations

No direct ranking effect beyond general table structure quality.

Browser & Modern HTML Notes

Well-supported across all browsers; CSS's position: sticky combined with <thead> is a common modern pattern for keeping table headers visible during scroll.

Mini Practice

1. Add a <thead> to a table that currently has its header row loose inside <table>.
2. Research (or try) CSS position: sticky on a <thead> row.

Related HTML Notes

• tbody
• tfoot