HTML - headers Attribute

HTML headers attribute is used to specify one or more header cells in table cell that contains the header information for the current data cell.

This attribute contains a list of space-separated strings, each corresponding to the <th> element's id attribute that applies to this element. It also specifies one or more header cells to which the table cell belongs.

Syntax

<tag headers = "header_id"></tag>

Applies On

Below listed elements allow using of the HTML headers attribute

Element	Description
<th>	HTML <th> tag is used to define header cell in a table
<td>	HTML <td> is used to define cells in a table.

Example of HTML headers Attribute

Below examples will illustrate the HTML height attribute, where and how we should use this attribute!

Headers attribute inside th Tag

In the following example, we are using the HTML 'header' attribute within the <th> tag to specify first name and last name belong to Name.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'headers' Attribute</title>
    <style>
        table,
        th,
        td {
           border: 1px solid black;
        }
    </style>
</head>

<body>
    <!--HTML 'headers' attribute-->
    <h3>Example of the HTML 'headers' attribute</h3>
    <table>
        <tr>
            <th id='name' colspan="2">Full Name</th>
        </tr>
        <tr>
            <th headers="name">First Name</th>
            <th headers="name">Last Name</th>
        </tr>
    </table>
</body>

</html>

Headers attributes inside td Tag

Considering another scenario, where we are going to use the header attribute with td element.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'headers' attribute</title>
    <style>
        table,
        th,
        td {
           border: 1px solid black;
        }
    </style>
</head>

<body>
    <!--HTML 'headers' attribute-->
    <h3>Example of the HTML 'headers' attribute</h3>
    <table>
        <tr>
            <th id="name">Name</th>
            <th id="email">Email</th>
            <th id='mobile'>Mobile</th>
            <th id='address'>Address</th>
        </tr>
        <tr>
            <td headers="name">Aman</td>
            <td headers="email">aman123@gmail.com</td>
            <td headers="mobile">9012345567</td>
            <td headers="address">Ranchi Jharkhand</td>
        </tr>
    </table>
</body>

</html>

Supported Browsers

Attribute
headers	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm