HTML Table createTFoot() Method: Creating Table Footer
The createTFoot() method in HTML is used to create a <tfoot> element (table footer) in an HTML table. This method is particularly useful when you want to dynamically add a table footer using JavaScript. A table can have only one <tfoot> element. If a footer already exists, this method returns the existing footer.
Purpose of the createTFoot() Method
The main purpose of the createTFoot() method is to:
- Dynamically add a table footer to an HTML table using JavaScript.
- Ensure only one footer exists per table, returning the existing one if present.
- Facilitate the creation of dynamic tables where footers might not be present in the initial HTML structure.
Syntax
The syntax for using the createTFoot() method is straightforward:
table.createTFoot();
Here, table is a reference to an HTML <table> element obtained using JavaScript (e.g., document.getElementById()).
Return Value
- Returns a
<tfoot>object, representing the newly created or existing table footer.
Examples
Let’s explore some examples of how to use the createTFoot() method effectively.
Basic Example: Creating a Table Footer
This example demonstrates how to create a basic table footer using the createTFoot() method.
<table id="myTableCreateTFootBasic" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</tbody>
</table>
<button onclick="createFooterBasic()">Create Footer</button>
<script>
function createFooterBasic() {
const table_basic = document.getElementById("myTableCreateTFootBasic");
const tfoot_basic = table_basic.createTFoot();
const row_basic = tfoot_basic.insertRow(0);
const cell_basic1 = row_basic.insertCell(0);
const cell_basic2 = row_basic.insertCell(1);
cell_basic1.innerHTML = "Total";
cell_basic2.innerHTML = "55";
}
</script>
In this example, clicking the “Create Footer” button dynamically adds a footer to the table, showing a total age.
Example: Checking if a Footer Exists
This example checks if a footer already exists before creating one.
<table id="myTableCreateTFootCheck" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</tbody>
</table>
<button onclick="createFooterCheck()">Create Footer</button>
<script>
function createFooterCheck() {
const table_check = document.getElementById("myTableCreateTFootCheck");
if (!table_check.tFoot) {
const tfoot_check = table_check.createTFoot();
const row_check = tfoot_check.insertRow(0);
const cell_check1 = row_check.insertCell(0);
const cell_check2 = row_check.insertCell(1);
cell_check1.innerHTML = "Total";
cell_check2.innerHTML = "55";
} else {
alert("Footer already exists!");
}
}
</script>
This code ensures that a new footer is created only if one doesn’t already exist, preventing duplicate footers.
Example: Creating a Footer with Multiple Cells
This example demonstrates creating a footer with multiple cells to display more complex information.
<table id="myTableCreateTFootMultiple" border="1">
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>1.00</td>
<td>10</td>
</tr>
<tr>
<td>Banana</td>
<td>0.50</td>
<td>20</td>
</tr>
</tbody>
</table>
<button onclick="createFooterMultiple()">Create Footer</button>
<script>
function createFooterMultiple() {
const table_multiple = document.getElementById("myTableCreateTFootMultiple");
const tfoot_multiple = table_multiple.createTFoot();
const row_multiple = tfoot_multiple.insertRow(0);
const cell_multiple1 = row_multiple.insertCell(0);
const cell_multiple2 = row_multiple.insertCell(1);
const cell_multiple3 = row_multiple.insertCell(2);
cell_multiple1.innerHTML = "Total";
cell_multiple2.innerHTML = "1.50";
cell_multiple3.innerHTML = "30";
}
</script>
In this example, the footer displays the total price and quantity of the products.
Example: Adding Style to the Footer
This example shows how to add styling to the created footer for better visual presentation.
<table id="myTableCreateTFootStyle" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>30</td>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</tbody>
</table>
<button onclick="createFooterStyle()">Create Footer</button>
<script>
function createFooterStyle() {
const table_style = document.getElementById("myTableCreateTFootStyle");
const tfoot_style = table_style.createTFoot();
tfoot_style.style.fontWeight = "bold";
tfoot_style.style.backgroundColor = "#f0f0f0";
const row_style = tfoot_style.insertRow(0);
const cell_style1 = row_style.insertCell(0);
const cell_style2 = row_style.insertCell(1);
cell_style1.innerHTML = "Total";
cell_style2.innerHTML = "55";
}
</script>
This code adds bold text and a light gray background to the footer for emphasis.
Example: Integrating with Form Data
This example integrates the footer creation with form data to dynamically calculate and display totals.
<table id="myTableCreateTFootForm" border="1">
<thead>
<tr>
<th>Item</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td><input type="number" id="valueA" value="10" onchange="updateTotal()"></td>
</tr>
<tr>
<td>B</td>
<td><input type="number" id="valueB" value="20" onchange="updateTotal()"></td>
</tr>
</tbody>
</table>
<script>
function updateTotal() {
const table_form = document.getElementById("myTableCreateTFootForm");
let tfoot_form = table_form.tFoot;
if (!tfoot_form) {
tfoot_form = table_form.createTFoot();
const row_form = tfoot_form.insertRow(0);
const cell_form1 = row_form.insertCell(0);
const cell_form2 = row_form.insertCell(1);
cell_form1.innerHTML = "Total";
cell_form2.id = "totalValue";
}
const valueA = parseInt(document.getElementById("valueA").value) || 0;
const valueB = parseInt(document.getElementById("valueB").value) || 0;
document.getElementById("totalValue").innerHTML = valueA + valueB;
}
// Initial calculation
updateTotal();
</script>
In this example, the footer dynamically updates the total value based on the input values in the table rows.
Practical Use Cases
The createTFoot() method is useful in scenarios such as:
- E-commerce Sites: Displaying order totals, taxes, and shipping costs in a dynamically generated table.
- Financial Applications: Showing summary data like total assets, liabilities, or net worth in financial tables.
- Data Analysis Tools: Presenting aggregated data, such as sums, averages, or counts, in tabular form.
- Interactive Reports: Dynamically generating report tables with summaries based on user-selected criteria.
Tips and Best Practices
- Always check if a footer already exists before creating a new one to avoid duplicates.
- Use
insertRow()andinsertCell()methods to populate the footer with data. - Apply styling to the footer for better visual distinction and readability.
- Consider accessibility when adding content to the footer, ensuring it is semantic and provides meaningful information to users.
- Remember that a table can have only one
<tfoot>element. ⚠️ - Avoid setting the
widthandheightattributes using CSS. 💡
Conclusion
The createTFoot() method provides a simple yet powerful way to dynamically add table footers in HTML. By understanding its syntax and utilizing it effectively with JavaScript, you can create dynamic tables that present summary data in a clear and organized manner.
