To group footer content in a table using HTML, use the <tfoot> tag. This tag works with <thead> and <tbody> to define a table's structure. The <tfoot> tag is a child of the <table> element and a parent to <tr> and <td>, ensuring organized and semantically meaningful table footers.
Syntax:
<tfoot> Table footer contents... </tfoot> Example: The example below shows how to group footer content in the form of a table using HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Footer</title>
<style>
tfoot {
color: blue;
}
table,
tbody,
td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<center>
<h2>
The footer content
in a table using HTML
</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th> Id</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mukesh</td>
<td>Shivam_b</td>
</tr>
<tr>
<td>Shashank</td>
<td>@shashankla</td>
</tr>
<tr>
<td>Rahman</td>
<td>@rahamD</td>
</tr>
</tbody>
<!-- tfoot tag starts from here -->
<tfoot>
<tr>
<td>Total user</td>
<td>4</td>
</tr>
</tfoot>
<!-- tfoot tag ends here -->
</table>
</center>
</body>
</html>
Output:
Example 2: The example below shows how to group footer content in form of table using HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table with Footer Example</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
h2 {
text-align: center;
}
th,
td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
thead {
background-color: #f2f2f2;
}
tfoot {
background-color: #e0e0e0;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Table with Footer Example</h2>
<table>
<thead>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 1</td>
<td>10</td>
<td>2</td>
<td>20</td>
</tr>
<tr>
<td>Item 2</td>
<td>15</td>
<td>1</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total</td>
<td>35</td>
</tr>
</tfoot>
</table>
</body>
</html>
Output:
