HTML DOM TableHeader headers Property

Last Updated : 24 Aug, 2022

The HTML DOM TableHeader headers property is used to set or return the value of the headers attribute. The header’s attribute is used to specify the table cell containing header information for the current header cell.

Syntax

It returns the header's property.

tableheaderObject.headers

It is used to set the header's property.

tableheaderObject.headers = header_ids

Property Values: It contains the value i.e header_ids which specify the separated list of id’s to one or more header cell.

Return Value: It returns a string value that represents the separated list of header-list id’s.

Example 1: This example returns a header's property.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- style to set border -->
    <style>
        table
        {
         border: 2px solid black;
        }        
        td 
        {
            border: 1px dotted green;
        }
    </style>
</head>
<body>
    <h2>GeeksforGeeks</h2>
    <b>DOM TableHeader headers property</b>
    <table> 
        <tr>
            <th id="tableHeaderID" headers="username">
                Username
            </th>
        </tr>
        <tr>
            <td>Sachin</td>
            <td>Suraj</td>
            <td>Gauri</td>
        </tr>
    </table>
    <br>
    <button onclick="getHeader()">
        Click to get table header
    </button>
    <p id="paraID" style="font-size:20px;color:green">
    </p>


    <!-- Script to return TableHeader headers Property -->
    <script>
        function getHeader() {
            var tab = document.getElementById("tableHeaderID").headers;
            document.getElementById("paraID").innerHTML = tab;
        }
    </script>
</body>
</html>

Output:

Example 2: Below code demonstrates the setting of the header's property.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- style to set border -->
    <style>
        table
        {
         border: 2px solid black;
        }        
        
        td 
        {
            border: 1px dotted green;
        }
    </style>
</head>
<body>
    <h2>GeeksforGeeks</h2>
    <b>DOM TableHeader headers property</b>
    <table> 
        <tr>
            <th id="tableHeaderID" headers="username">
                Username
            </th>
        </tr>
        <tr>
            <td>Sachin</td>
            <td>Suraj</td>
            <td>Gauri</td>
        </tr>
    </table>
    <br>
    <button onclick="getHeader()">
        Click to get table header value
    </button>
    <p id="paraID" style="font-size:18px;color:green">
    </p>


    <!-- Script to set the TableHeader headers Property -->
    <script>
        function getHeader() {
                var tab = document.getElementById(
            "tableHeaderID").headers = "user_firstname";
            document.getElementById("paraID").innerHTML = 
            "The value of the headers attribute was changed to: " + tab;
        }
    </script>
</body>
</html>