HTML Tutorial
The <tfoot>
tag in HTML serves as a container for footer content in a table. It is typically used to display summary information or additional details related to the table's data.
<tfoot>
To use the <tfoot>
tag, simply wrap the footer content within it, like this:
<table>
<tfoot>
<tr>
<th>Total</th>
<td>100</td>
</tr>
</tfoot>
</table>
<tfoot>
<tfoot>
doesn't have any specific attributes.
<tfoot>
In this example, the
tag is used to display a total row at the bottom of a table:<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>5</td>
<td>$50</td>
</tr>
<tr>
<td>Item 2</td>
<td>$15</td>
<td>3</td>
<td>$45</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th>Total</th>
<th>$95</th>
</tr>
</tfoot>
</table>
Exploring the <tfoot>
Tag
To explore the <tfoot>
tag further, you can use the following HTML code in your browser:
<!DOCTYPE html>
<html>
<head>
<title><tfoot> Example</title>
</head>
<body>
<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>5</td>
<td>$50</td>
</tr>
<tr>
<td>Item 2</td>
<td>$15</td>
<td>3</td>
<td>$45</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th>Total</th>
<th>$95</th>
</tr>
</tfoot>
</table>
</body>
</html>