The HTML DOM tfoot object is used to represent the HTML <tfoot> element . The <tfoot> object is used to group HTML table content for footer part of the document. The <tfoot> object is used with the <thead>, <tbody> elements of the HTML document. Now a days the <tfoot> object is deprecated and not in use.
Accessing tfoot object: We can easily access the tfoot object by using getElementById() method.
Syntax:
document.getElementById()
Property Values
- align: Set the alignment of the text content.
- valign: It is used to set the vertical alignment of text content.
- char: Aligns the content in a header cell 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 background color of a <tfoot> 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 TFoot Object </ b ></ p >
< table >
< thead >
< tr >
< td >Username</ td >
< td >User_Id</ td >
</ tr >
</ thead >
< tbody >
< tr >
< td >Shashank</ td >
< td >@shashankla</ td >
</ tr >
< tfoot id = "tfootID" bgcolor = "green" >
< tr >
< td >GeeksforGeeks</ td >
< td >@geeks</ td >
</ tr >
</ tfoot >
</ tbody >
</ table >
< p >
Click on the button to change the
background color of tfoot element
</ p >
< button onclick = "btnclick()" >
Click here
</ button >
< p id = "paraID" ></ p >
</ center >
< script >
function btnclick() {
var thead = document
.getElementById("tfootID");
thead.style.backgroundColor = "red";
}
</ script >
</ body >
</ html >
|
Output:
Creating a tfoot object: We can easily create a tfoot object by using the following.
Syntax:
document.createElement()
Example 2: Below HTML code is used to create a tfoot object by using a createElement() method.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
table,
th,
td {
border: 1px solid green;
}
</ style >
</ head >
< body >
< center >
< h1 >
GeeksforGeeks
</ h1 >
< h2 >HTML DOM tfoot object</ h2 >
< table id = "tableID" >
< thead >
< tr >
< td >Name</ td >
</ tr >
</ thead >
< tr >
< td >Manas</ td >
</ tr >
< tr >
< td >Hritik</ td >
</ tr >
</ thead >
</ table >
< p >
Click button to create tfoot element.
</ p >
< button onclick = "btnclick()" >
Click here
</ button >
</ center >
< script >
function btnclick() {
/* Create tfoot element */
var X = document.createElement("TFOOT");
/* Create tr element */
var Y = document.createElement("TR");
/* Create td element */
var Z = document.createElement("TD");
Z.innerHTML = "Govind";
Y.appendChild(Z);
X.appendChild(Y);
document.getElementById(
"tableID").appendChild(X);
}
</ script >
</ body >
</ html >
|
Output:
Supported Browsers are listed below:
- Chrome 1.0
- Edge 12.0
- Firefox 1.0
- Internet Explorer 5.5
- Opera 12.1
- Safari 3.0
Last Updated :
22 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...