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");
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 >w3wiki</ h1 > < h2 >DOM TableHeader Object</ h2 > < table > < tr > < th id = "table" >Username</ th > </ tr > < tr > < td >Beginner</ td > </ tr > </ table > < p > Click on button to change th element. </ p > < button onclick = "myBeginner()" > Click Here! </ button > <!-- Script to access th element --> < script > function myBeginner() { 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 >w3wiki</ 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 = "myBeginner()" > Click Here! </ button > <!-- script to create th element --> < script > function myBeginner() { /* 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