HTML | DOM Table createTFoot( ) Method
Last Updated :
20 Nov, 2021
The Table createTFoot() method is used for creating an empty <tfoot> element and adding it to the table. It does not create a new <tfoot> element if a <tfoot> element already exists. In such a case, the createTFoot() method returns the existing one.
The <tfoot> element must have multiple <tr> tags inside.
Syntax
tableObject.createTFoot()
Return Value: It returns the newly created or an existing <tfoot> element.
Below program illustrates the Table createTFoot() method :
Example-1: Creating a <tfoot> element.
html
<!DOCTYPE html>
< html >
< head >
< title >Table createTFoot() Method in HTML
</ title >
< style >
table,
td {
border: 1px solid green;
}
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</ style >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h2 >Table createTFoot() Method</ h2 >
< p >To create a footer for a table,
double-click the "Add Footer" button.</ p >
< table id = "Courses" align = "center" >
< tr >
< td >Java</ td >
< td >Fork Java</ td >
</ tr >
< tr >
< td >Python</ td >
< td >Fork Python</ td >
</ tr >
< tr >
< td >Placements</ td >
< td >Sudo Placement</ td >
</ tr >
</ table >
< br >
< button ondblclick = "foot()" >
Add Footer
</ button >
< script >
function foot() {
var MyTable = document.getElementById("Courses");
// Creating footer.
var MyFooter = MyTable.createTFoot();
var MyRow = MyFooter.insertRow(0);
var MyCell = MyRow.insertCell(0);
MyCell.innerHTML =
"< b >Available On GeeksforGeeks.</ b >";
}
</ script >
</ body >
</ html >
|
Output:
Before clicking the button:
After clicking the button:
Supported Browsers:
- Apple Safari
- Internet Explorer
- Firefox
- Google Chrome
- Opera
Share your thoughts in the comments
Please Login to comment...