Skip to content
Related Articles

Related Articles

HTML | DOM TableHeader Object
  • Last Updated : 11 Feb, 2019

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:

PropertyDescription
abbrThis property is used to set or return the value of the abbr attribute.
alignThis property is used to set or return the horizontal alignment of the content in a data cell.
vAlignThis property is used to set or return the vertical alignment of the content within a cell.
widthThis property is used to set or return the width of a data cell.
axisThis property is used to set or return a comma-separated list of related data cells.
backgroundThis property is used to set or return the background image of a data cell.
bgColorThis property is used to set or return the background color of a table.
cellIndexThis property is used to return the position of a cell in the cells collection of a table row.
chThis property is used to set or return an alignment character for a data cell.
chOffThis property is used to set or return the horizontal offset of the ch property.
colSpanThis property is used to set or return the value of the colspan attribute.
headersThis property is used to set or return the value of the headers attribute.
heightThis property is used to set or return the height of a data cell.
noWrapThis property is used to set or return whether the content in a cell can be wrapped.
rowSpanThis property is used to set or return the value of the rowspan attribute.

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




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




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

Output:
Before click on the button:

After click on the button:




My Personal Notes arrow_drop_up
Recommended Articles
Page :