Open In App

HTML headers attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML headers attribute is used in table cells (td and th elements) to associate data cells with header cells, aiding accessibility by providing context for screen readers and other assistive technologies.

Supported Tags

Syntax

<td header="header_value"></td>
<th header="header_value"></th>

Attribute Values

It contains the value i.e header_id which specify the space to the separated list of id’s to one or more Header cell that the table header cell is related to.

HTML headers attribute Example

Example : In this example we defines a table with three columns (Name, Email, Phone) and one row of data. Headers attribute associates data cells with corresponding header cells, aiding accessibility and structure understanding.

html




<!DOCTYPE html>
<html>
    <head>
        <style>
            table,
            th,
            td {
                border: 3px solid black;
            }
        </style>
    </head>
 
    <body>
        <table style="width: 100%">
            <tr>
                <th id="name">Name</th>
                <th id="email">Email</th>
                <th id="phone">Phone</th>
            </tr>
            <tr>
                <td headers="name">Smith</td>
                <td headers="email">
                    someone@gfg.com
                </td>
                <td headers="phone">+9199889</td>
            </tr>
        </table>
    </body>
</html>


Output: 

Supported Browsers: The browser supported by HTML headers Attribute are listed below: 



Last Updated : 07 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads