<thead> Tag in HTML | Grouping Header Content in Tables

The <thead> tag in HTML is used to group header content in a table. It helps in defining a block of rows that represent column headers, which are typically displayed at the top of the table. Using <thead> makes tables more accessible and structured, especially for screen readers.

Key Points on <thead> Tag:

• Structure: The <thead> element is used with <tr> and <th> tags to define table headers.
• Grouping Headers: Headers within <thead> will repeat on each page when printed, providing context on every page.
• Styling: You can apply unique styling to <thead> rows, making headers visually distinct from the table body and footer.

Syntax of <thead> Tag:

<table>
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body rows go here -->
            </tbody>
        </table>

Example of <thead> Tag in HTML:

This example demonstrates a table with a header row defined using the <thead> tag.

<table border="1">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>City</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Alice</td>
                    <td>24</td>
                    <td>New York</td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td>30</td>
                    <td>Los Angeles</td>
                </tr>
            </tbody>
        </table>

Attributes of <thead> Tag:

• Global Attributes: The <thead> tag supports global attributes like class, id, style, and title.

Advantages of Using <thead> Tag:

• Accessibility: Screen readers recognize <thead> content as headers, improving accessibility for users with disabilities.
• Enhanced Print View: When printed, headers within <thead> repeat on each page, aiding multi-page table readability.
• CSS Styling: Easily apply styles to header rows, distinguishing them from the table's main content.

The <thead> tag provides an efficient way to structure table headers in HTML, improving readability, accessibility, and print layout.