HTML | DOM Table createTFoot( ) Method
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 >w3wiki</ 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 w3wiki.</ b >"; } </ script > </ body > </ html > |
Output:
Before clicking the button:
After clicking the button:
Supported Browsers:
- Apple Safari
- Internet Explorer
- Firefox
- Google Chrome
- Opera