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.
Example 1: Below HTML code illustrates how to change the bgcolor of the <thead> element.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
table,
th,
td {
border: 1px solid green;
}
</ style >
</ head >
< body >
< center >
< h1 >
GeeksforGeeks
</ 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 >GeeksforGeeks</ td >
< td >@geeks</ 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 >
GeeksforGeeks
</ 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
Last Updated :
02 Mar, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...