Table headers identify the meaning of rows and columns in an HTML table. Proper table headers make structured data easier to understand and more accessible.

1. Introduction to Table Headers

HTML uses the <th> element to define a table header cell. Header cells normally describe the data contained in a row or column.

<table>

    <tr>
        <th>Name</th>
        <th>Course</th>
        <th>Marks</th>
    </tr>

    <tr>
        <td>John</td>
        <td>HTML</td>
        <td>85</td>
    </tr>

</table>

Output:

Name	Course	Marks
John	HTML	85

2. The th Element

The <th> element defines a header cell. By default, browsers generally render header text as bold and centered.

<th>Student Name</th>

Header cells can identify either columns or rows depending on the table structure.

3. Column Headers

The most common use of <th> is to identify columns.

<table>

    <tr>
        <th>Student Name</th>
        <th>Course</th>
        <th>Marks</th>
    </tr>

    <tr>
        <td>John</td>
        <td>HTML</td>
        <td>85</td>
    </tr>

</table>

4. Row Headers

A table can also have a header cell that identifies the content of a particular row.

<table>

    <tr>
        <th>Course</th>
        <th>Marks</th>
    </tr>

    <tr>
        <th>HTML</th>
        <td>85</td>
    </tr>

    <tr>
        <th>CSS</th>
        <td>90</td>
    </tr>

</table>

Example:

Course	Marks
HTML	85
CSS	90

5. scope Attribute

The scope attribute specifies whether a header applies to a column or a row.

<table>

    <tr>
        <th scope="col">Name</th>
        <th scope="col">Course</th>
        <th scope="col">Marks</th>
    </tr>

    <tr>
        <td>John</td>
        <td>HTML</td>
        <td>85</td>
    </tr>

</table>

6. scope="col"

Use scope="col" when a header identifies the cells in a column.

<tr>

    <th scope="col">Product</th>
    <th scope="col">Quantity</th>
    <th scope="col">Price</th>

</tr>

Meaning: Each header applies to the cells below it in the same column.

7. scope="row"

Use scope="row" when a header identifies the cells across the same row.

<tr>

    <th scope="row">Laptop</th>
    <td>2</td>
    <td>50000</td>

</tr>

8. Complete Row and Column Header Example

<table>

    <tr>
        <th scope="col">Product</th>
        <th scope="col">Quantity</th>
        <th scope="col">Price</th>
    </tr>

    <tr>
        <th scope="row">Laptop</th>
        <td>2</td>
        <td>100000</td>
    </tr>

    <tr>
        <th scope="row">Mouse</th>
        <td>5</td>
        <td>5000</td>
    </tr>

</table>

Output:

Product	Quantity	Price
Laptop	2	100000
Mouse	5	5000

9. thead with Headers

The <thead> element groups the header rows of a table.

<table>

    <thead>

        <tr>
            <th scope="col">Name</th>
            <th scope="col">Course</th>
            <th scope="col">Marks</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>John</td>
            <td>HTML</td>
            <td>85</td>
        </tr>

    </tbody>

</table>

10. Multiple Header Rows

A table can have more than one header row, especially when information is grouped into categories.

<table>

    <thead>

        <tr>
            <th rowspan="2">Course</th>
            <th colspan="2">Performance</th>
        </tr>

        <tr>
            <th>Theory</th>
            <th>Practical</th>
        </tr>

    </thead>

</table>

11. Header Cells with colspan

The colspan attribute allows a header to cover multiple columns.

<tr>

    <th colspan="2">
        Student Information
    </th>

</tr>

Example:

Student Information
John	HTML

12. Header Cells with rowspan

The rowspan attribute allows a header to cover multiple rows.

<tr>

    <th rowspan="2">
        Course
    </th>

    <th>Theory</th>
    <th>Practical</th>

</tr>

<tr>

    <th>Marks</th>
    <th>Marks</th>

</tr>

13. Grouped Column Headers

Grouped headers are useful when multiple columns belong to the same category.

<table>

    <thead>

        <tr>

            <th rowspan="2">Student</th>
            <th colspan="2">Marks</th>
            <th rowspan="2">Result</th>

        </tr>

        <tr>

            <th>Theory</th>
            <th>Practical</th>

        </tr>

    </thead>

</table>

Output:

Student	Marks		Result
Student	Theory	Practical	Result
John	85	90	Pass

14. Accessible Header Structure

A well-structured table should clearly identify relationships between headers and data cells.

<table>

    <thead>

        <tr>

            <th scope="col">Student</th>
            <th scope="col">Course</th>
            <th scope="col">Marks</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <th scope="row">John</th>
            <td>HTML</td>
            <td>85</td>

        </tr>

    </tbody>

</table>

15. headers and id Attributes

For complex tables with multiple levels of headers, the headers attribute can associate a data cell with one or more header cells by their id.

<table>

    <tr>
        <th id="student">Student</th>
        <th id="course">Course</th>
        <th id="marks">Marks</th>
    </tr>

    <tr>
        <td headers="student">John</td>
        <td headers="course">HTML</td>
        <td headers="marks">85</td>
    </tr>

</table>

Note: The headers and id relationship is particularly useful for complex data tables with multiple header associations.

16. Column Header Example

<table>

    <thead>

        <tr>
            <th scope="col">Product</th>
            <th scope="col">Price</th>
            <th scope="col">Quantity</th>
        </tr>

    </thead>

    <tbody>

        <tr>
            <td>Laptop</td>
            <td>50000</td>
            <td>2</td>
        </tr>

        <tr>
            <td>Mouse</td>
            <td>1000</td>
            <td>5</td>
        </tr>

    </tbody>

</table>

17. Row Header Example

<table>

    <tr>

        <th scope="col">Course</th>
        <th scope="col">Duration</th>
        <th scope="col">Level</th>

    </tr>

    <tr>

        <th scope="row">HTML</th>
        <td>2 Months</td>
        <td>Beginner</td>

    </tr>

    <tr>

        <th scope="row">CSS</th>
        <td>2 Months</td>
        <td>Beginner</td>

    </tr>

</table>

18. Header Styling with CSS

CSS can be used to customize the visual appearance of table header cells.

<style>

    th {
        background-color: #212529;
        color: white;
        padding: 12px;
        text-align: left;
    }

</style>

19. Center Header Text

<style>

    th {
        text-align: center;
    }

</style>

20. Header Padding

<style>

    th {
        padding: 15px;
    }

</style>

21. Header Borders

<style>

    th {
        border: 1px solid #000;
    }

</style>

22. Complete Header Styling Example

<style>

    .student-table {
        width: 100%;
        border-collapse: collapse;
    }

    .student-table th,
    .student-table td {
        border: 1px solid #dee2e6;
        padding: 12px;
    }

    .student-table th {
        background-color: #212529;
        color: white;
        text-align: left;
    }

</style>

<table class="student-table">

    <thead>

        <tr>

            <th scope="col">Name</th>
            <th scope="col">Course</th>
            <th scope="col">Marks</th>

        </tr>

    </thead>

    <tbody>

        <tr>
            <td>John</td>
            <td>HTML</td>
            <td>85</td>
        </tr>

    </tbody>

</table>

23. Header vs Data Cells

Element	Purpose	Example
`<th>`	Defines a header cell.	`<th>Name</th>`
`<td>`	Defines a normal data cell.	`<td>John</td>`

24. Common Header Mistakes

Using <td> instead of <th> for headers.
Creating unclear or missing header labels.
Using incorrect scope values.
Using too many grouped header levels without a clear structure.
Forgetting accessible relationships in complex tables.
Using CSS styling without providing semantic table headers.

25. Best Practices

Use <th> for actual table headers.
Use scope="col" for column headers when appropriate.
Use scope="row" for row headers when appropriate.
Use <thead> for header rows.
Use colspan and rowspan carefully.
Keep complex table relationships clear.
Use CSS for visual styling rather than replacing semantic structure.

26. Practice Task

Create an HTML table containing:

Three column headers using <th>.
Row headers using scope="row".
Column headers using scope="col".
A header spanning two columns using colspan.
A header spanning two rows using rowspan.
A table using <thead> and <tbody>.
Accessible associations using headers and id.
CSS styling for the header row.

27. Complete Practice Example

<!DOCTYPE html>
<html>

<head>

    <title>Table Headers Example</title>

    <style>

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #000;
            padding: 10px;
        }

        th {
            background-color: #f2f2f2;
        }

    </style>

</head>

<body>

    <h1>Student Performance</h1>

    <table>

        <thead>

            <tr>
                <th rowspan="2" scope="col">Student</th>
                <th colspan="2">Marks</th>
                <th rowspan="2" scope="col">Result</th>
            </tr>

            <tr>
                <th scope="col">Theory</th>
                <th scope="col">Practical</th>
            </tr>

        </thead>

        <tbody>

            <tr>
                <th scope="row">John</th>
                <td>85</td>
                <td>90</td>
                <td>Pass</td>
            </tr>

            <tr>
                <th scope="row">David</th>
                <td>88</td>
                <td>92</td>
                <td>Pass</td>
            </tr>

        </tbody>

    </table>

</body>

</html>

Summary

HTML table headers are created using the <th> element and are used to identify rows or columns. The scope attribute can clarify header relationships, while colspan and rowspan allow headers to span multiple columns or rows. For complex tables, the headers and id attributes can provide explicit associations between data cells and headers.

← Previous: Tables Next: Colspan and Rowspan →