HTML | DOM TableHeader Object

Last Updated : 23 May, 2022

The TableHeader object in HTML DOM is used to represent the HTML <th> element. The <th> element can be accessed by using getElementById() method.

Syntax:

It is used to access <th> element.

document.getElementById("id");

It is used to create <th> element.

document.createElement("th");

TableHeader Object Properties:

Property	Description
abbr	This property is used to set or return the value of the abbr attribute.
align	This property is used to set or return the horizontal alignment of the content in a data cell.
vAlign	This property is used to set or return the vertical alignment of the content within a cell.
width	This property is used to set or return the width of a data cell.
axis	This property is used to set or return a comma-separated list of related data cells.
background	This property is used to set or return the background image of a data cell.
bgColor	This property is used to set or return the background color of a table.
cellIndex	This property is used to return the position of a cell in the cells collection of a table row.
ch	This property is used to set or return an alignment character for a data cell.
chOff	This property is used to set or return the horizontal offset of the ch property.
colSpan	This property is used to set or return the value of the colspan attribute.
headers	This property is used to set or return the value of the headers attribute.
height	This property is used to set or return the height of a data cell.
noWrap	This property is used to set or return whether the content in a cell can be wrapped.
rowSpan	This property is used to set or return the value of the rowspan attribute.

Example 1: This example use getElementById() method to access <th> element.

HTML

<!DOCTYPE html>
<html>
    
<head>
    
    <!-- style to set border -->
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>

<body> 

    <h1>GeeksforGeeks</h1> 

    <h2>DOM TableHeader Object</h2> 

    <table>
        <tr>
            <th id = "table">Username</th>
        </tr>
        
        <tr>
            <td>geeks</td>
        </tr>
    </table>
    
    


<p>
        Click on button to change th element.
    </p>



    
    <button onclick = "myGeeks()">
        Click Here!
    </button>
    
    <!-- Script to access th element -->
    <script>
        function myGeeks() {
            var tab = document.getElementById("table");
            tab.innerHTML = "User Handle";
        }
    </script>
</body>

</html>

Output:
Before click on the button:

After click on the button:

Example 2: This example use document.createElement() method to create <th> element.

HTML

<!DOCTYPE html>
<html>
    
<head>
    
    <!-- style to set border -->
    <style>
        table, th, td {
            border: 1px solid black;
        }
    </style>
</head>

<body> 

    <h1>GeeksforGeeks</h1> 

    <h2>DOM TableHeader Object</h2> 

    <table id = "tab">
        <tr id = "mytable">
        </tr>
    </table>
    
    


<p>Click the button to create a th element.</p>



    
    <button onclick = "myGeeks()">
        Click Here!
    </button>
    
    <!-- script to create th element -->
    <script>
        function myGeeks() {
            
            /* Create Table Header  element */
            var tab_row = document.createElement("TH");
            
            /* Set the the text node */
            var text = document.createTextNode("Table Header Content");
            tab_row.appendChild(text);
            document.getElementById("mytable").appendChild(tab_row);
        }
    </script>
</body>

</html>