How HTMLHTML Table Footer
HTML table footer, or <tfoot>, is a tag used to define a footer for an HTML table. The footer should contain summary information about the table data and typically appears at the bottom of the table. In this article, we will explore how to use the <tfoot> tag in HTML tables.
1. Basic <tfoot> Example
Let’s start with a basic example of how to use the <tfoot> tag in an HTML table.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Footer Example</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total:</td>
<td>$100</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
In the above example, we have defined a basic HTML table structure with a <tfoot> containing a total amount.
2. Styling <tfoot> Using CSS
You can style the <tfoot> section of the table using CSS to make it visually distinct from the rest of the table.
<!DOCTYPE html>
<html>
<head>
<title>Styling HTML Table Footer</title>
<style>
tfoot {
background-color: #f2f2f2;
font-weight: bold;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total:</td>
<td>$100</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
In this example, we have used CSS to apply a background color and bold font to the <tfoot> section.
3. Using <tfoot> in a Complex Table
You can also use <tfoot> in a table that has multiple rows and columns.
<!DOCTYPE html>
<html>
<head>
<title>Complex Table with Footer</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<td>Item 2</td>
<td>3</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total:</td>
<td>$55</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
In the above example, we have created a table with multiple rows and columns, and a <tfoot> containing the total price.
4. Using Colspan in <tfoot>
You can use the colspan attribute with the <td> element in the <tfoot> section to span multiple columns.
<!DOCTYPE html>
<html>
<head>
<title>Using Colspan in Table Footer</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<td>Item 2</td>
<td>3</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total:</td>
<td>$55</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
In this example, the <td> element with colspan="2" will span across two columns in the <tfoot> section.
5. Adding Styling to <tfoot>
You can apply additional styling to the <tfoot> section using CSS to make it more visually appealing.
<!DOCTYPE html>
<html>
<head>
<title>Styling Table Footer</title>
<style>
tfoot {
background-color: #f2f2f2;
font-weight: bold;
text-align: right;
padding: 10px;
}
tfoot td:first-child {
text-align: left;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<td>Item 2</td>
<td>3</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total:</td>
<td>$55</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
In this example, we have applied background color, font-weight, text alignment, and padding to the <tfoot> section.
6. Using <tfoot> with JavaScript
You can also dynamically populate the <tfoot> section of the table using JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Table Footer</title>
<script>
function updateTotal() {
let total = 0;
document.querySelectorAll('tbody tr').forEach((row) => {
total += parseInt(row.children[1].innerText) * parseInt(row.children[2].innerText.slice(1));
});
document.querySelector('tfoot td:last-child').innerText = '' + total;
}
</script>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<td>Item 2</td>
<td>3</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total:</td>
<td>0</td>
</tr>
</tfoot>
</table>
<button onclick="updateTotal()">Calculate Total</button>
</body>
</html>
Output:
In this example, we have created a function updateTotal() that calculates the total price based on the quantity and price of each item in the table.
7. Using Table Footer in Responsive Design
When designing responsive tables, it’s important to ensure that the <tfoot> section is properly styled for smaller screens.
<!DOCTYPE html>
<html>
<head>
<title>Responsive Table with Footer</title>
<style>
@media only screen and (max-width: 600px) {
tbody, thead, tfoot {
display: block;
}
tr {
display: flex;
flex-wrap: wrap;
}
th, td {
width: 50%;
text-align: center;
}
tfoot td {
text-align: left;
}
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>2</td>
<td>10</td>
</tr>
<tr>
<td>Item 2</td>
<td>3</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total:</td>
<td>$55</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
In this example, we have used media queries to make the table footer section responsive for smaller screen sizes.
8. Using <tfoot> in a Data Table
When working with data tables, the <tfoot> section can be used to display calculated totals, averages, or other summary information.
<!DOCTYPE html>
<html>
<head>
<title>Data Table Footer Example</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>1000</td>
</tr>
<tr>
<td>February</td>
<td>1500</td>
</tr>
<tr>
<td>March</td>
<td>1200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total:</td>
<td>3700</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
In this example, the <tfoot> section displays the total sales for the months listed in the data table.
9. Using Summary Attribute with <tfoot>
You can use the summary attribute with the <tfoot> tag to provide a brief summary of the table content for accessibility.
<!DOCTYPE html>
<html>
<head>
<title>Table with Summary Attribute</title>
</head>
<body>
<table border="1" summary="Sales data for the year">
<thead>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>1000</td>
</tr>
<tr>
<td>February</td>
<td>1500</td>
</tr>
<tr>
<td>March</td>
<td>1200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total:</td>
<td>3700</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
In this example, the summary attribute provides a brief description of the table content for assistive technologies.
10. Using Table Header and Footer Grouping
You can use the <thead> and <tfoot> elements together to group header and footer content in a table.
<!DOCTYPE html>
<html>
<head>
<title>Table Header and Footer Grouping</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th colspan="2" style="text-align: center">Sales Data</th>
</tr>
<tr>
<th>Month</th>
<th>Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>1000</td>
</tr>
<tr>
<td>February</td>
<td>1500</td>
</tr>
<tr>
<td>March</td>
<td>1200</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total:</td>
<td>3700</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
In this example, we have grouped the header content and footer content together for a more organized table structure.
Conclusion
In this article, we have explored the usage of the <tfoot> tag in HTML tables. By using <tfoot>, you can provide summary information, totals, and other important details at the bottom of your tables. Whether you need to display calculated totals or provide accessibility information, the <tfoot> tag offers a flexible way to enhance the presentation of your table data.