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.
<!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 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>
Output:
Before click on the button:
After click on the button:
Supported Browsers:
- Google Chrome
- Edge
- Mozilla Firefox
- Opera
- Safari