To add a table footer on an HTML table you can use the HTML tfoot tag. The footer is required when the developer wants to show the conclusion or the result of the table data in a single row.
Syntax:
<tfoot> // Table footer contents... </tfoot>
Below example will illustrate the concept of table footer and clear your thoughts about how to create a table footer in HTML.
Example: In this example, we will create a table that contains 2 courses and a price with the total price at the table footer.
HTML
<!DOCTYPE html> <html>
<head>
<style>
h1 {
color: green;
}
table, th, td {
border: 2px solid black;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h2>How to create table footer in HTML</h2>
<table>
<thead>
<tr>
<th>Course</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>ReactJS</td>
<td>$39</td>
</tr>
<tr>
<td>JavaScript</td>
<td>$23</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$62</td>
</tr>
</tfoot>
</table>
</center>
</body>
</html>
|
Output:
Table Footer