Skip to content
Related Articles

Related Articles

Improve Article

HTML DOM TableHeader headers Property

  • Last Updated : 26 May, 2021

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 access th element -->
    <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 access th element -->
    <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>

Output:

Supported Browsers:

  • Google Chrome
  • Firefox
  • Opera
  • Safari
  • Internet Explorer/Edge

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :