Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Table createTFoot() Method
The HTML DOM table createTFoot() method generates an empty <tfoot> element and adds it to the table. If a <tfoot> element already exists in the table, this method returns the existing one instead of creating a new one.
Syntax
Following is the syntax for the createTFoot() method −
tableObject.createTFoot()
Return Value
The method returns a <tfoot> element. If the table already contains a <tfoot> element, it returns the existing one; otherwise, it creates and returns a new <tfoot> element.
Example − Creating a Table Footer
Following example demonstrates how to use the createTFoot() method to add a footer to a table −
<!DOCTYPE html>
<html>
<head>
<title>DOM Table createTFoot() Method</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
table {
margin: 20px auto;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #333;
padding: 10px;
}
tfoot {
background-color: #f0f0f0;
font-weight: bold;
}
.btn {
background: #007bff;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
margin: 10px;
}
</style>
</head>
<body>
<h2>Student Records</h2>
<table id="studentTable">
<thead>
<tr>
<th>Name</th>
<th>Roll No.</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>001</td>
<td>A</td>
</tr>
<tr>
<td>Jane</td>
<td>002</td>
<td>B</td>
</tr>
<tr>
<td>Bob</td>
<td>003</td>
<td>A</td>
</tr>
</tbody>
</table>
<button onclick="createFooter()" class="btn">Create Footer</button>
<button onclick="addSummary()" class="btn">Add Summary</button>
<script>
function createFooter() {
var table = document.getElementById("studentTable");
var tfoot = table.createTFoot();
var row = tfoot.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
cell1.innerHTML = "Total Students";
cell2.innerHTML = "3";
cell3.innerHTML = "-";
}
function addSummary() {
var table = document.getElementById("studentTable");
var tfoot = table.createTFoot(); // Returns existing if already created
var row = tfoot.insertRow();
var cell = row.insertCell(0);
cell.colSpan = 3;
cell.innerHTML = "End of Student Records";
}
</script>
</body>
</html>
The example creates a table footer with summary information. The first button creates a footer row with student count, and the second button demonstrates that createTFoot() returns the existing footer if one already exists.
Student Records Table Name Roll No. Grade John 001 A Jane 002 B Bob 003 A [Create Footer] [Add Summary] After clicking "Create Footer": Total Students 3 - After clicking "Add Summary": End of Student Records (spans all columns)
Example − Simple Footer Creation
Following is a simpler example showing the basic usage of createTFoot() −
<!DOCTYPE html>
<html>
<head>
<title>Simple createTFoot() Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<table id="myTable" border="1" style="margin: 20px auto;">
<tr>
<td>Product</td>
<td>Price</td>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
</tr>
<tr>
<td>Mouse</td>
<td>$25</td>
</tr>
</table>
<div style="text-align: center;">
<button onclick="addFooter()">Add Footer</button>
</div>
<script>
function addFooter() {
var table = document.getElementById("myTable");
var footer = table.createTFoot();
footer.innerHTML = "<tr><td>Total</td><td>$1024</td></tr>";
}
</script>
</body>
</html>
This example directly sets the innerHTML of the created footer element to add a total row.
Product Price Laptop $999 Mouse $25 [Add Footer] After clicking button: Total $1024
Key Points
Important points to remember about the createTFoot() method −
-
If the table already has a
<tfoot>element, the method returns the existing one instead of creating a new one. -
The created
<tfoot>element is automatically positioned at the bottom of the table, after any<tbody>elements. -
You can use methods like
insertRow()andinsertCell()on the returned<tfoot>element to add content. -
The method does not require any parameters.
Browser Compatibility
The createTFoot() method is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer.
Conclusion
The createTFoot() method is a useful DOM method for dynamically adding footer sections to HTML tables. It returns the existing <tfoot> element if one already exists, making it safe to call multiple times without creating duplicate footers.
165 Views
