HTML DOM THead Object
The HTML DOM THead object is used to represent the HTML <thead> element. It helps in giving reference to access the <thead> element in the HTML document.
Access a THead object:
We can easily access a <thead> element in the document by using HTML getElementById() method.
Syntax:
document.getElementById()
Property Values
- align: Set the alignment of the text content.
- valign: Set the vertical alignment of the text content.
- char: Set the alignment of content inside the <thead> element to a character.
- charoff: It is used to sets the number of characters that will be aligned from the character specified by the char attribute. The value of these attributes is in numeric form.
HTML
<!DOCTYPE html> < html > < head > < style > table, th, td { border: 1px solid green; } </ style > </ head > < body > < center > < h1 > w3wiki </ h1 > < p >< b >HTML DOM THead Object </ b ></ p > < table > < thead id = "tableID" bgcolor = "43e" > < tr > < td >Username</ td > < td >User_Id</ td > </ tr > </ thead > < tbody > < tr > < td >Shashank</ td > < td >@shashankla</ td > </ tr > < tr > < td >w3wiki</ td > < td >@Beginner</ td > </ tr > </ tbody > </ table > < p > Click on the button to change the background color of thead element. </ p > < button onclick = "btnclick()" > Click here </ button > < p id = "paraID" ></ p > </ center > < script > function btnclick() { var thead = document.getElementById("tableID"); thead.style.backgroundColor = "red"; } </ script > </ body > </ html > |
Output:
Create a THead Object: We can create a THead Object by using the document.createElement() method.
Syntax:
document.createElement()
Example 2:
HTML
<!DOCTYPE html> < html > < head > < style > table, th, td { border: 1px solid green; } </ style > </ head > < body > < center > < h1 > w3wiki </ h1 > < h2 >HTML DOM THead object</ h2 > < table id = "tableID" > </ table > < p > Click button to create thead element. </ p > < button onclick = "btnclick()" > Click here </ button > < script > function btnclick() { /* Create thead element */ var x = document.createElement("THEAD"); /* Create tr element */ var y = document.createElement("TR"); /* Create td element */ var z = document.createElement("TD"); z.innerHTML = "Username"; /* Create td element */ var w = document.createElement("TD"); w.innerHTML = "Password"; y.appendChild(z); y.appendChild(w); x.appendChild(y); document.getElementById("tableID").appendChild(x); } </ script > </ body > </ html > |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Opera mini
- Firefox
- Apple Safari