HTML | DOM TableHeader Object

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");

TableData 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


Output:
Before click on the button:

After click on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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 an input 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>                    

chevron_right


Output:
Before click on the button:

After click on the button:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.