Problem Statement
What is the <tfoot> tag used for in tables?
Explanation
The tfoot tag is used to group footer content in a table, typically containing summary information like totals, averages, or notes. The tfoot should contain one or more tr tags with cells that summarize or conclude the table data. Common uses include displaying total sales, average scores, grand totals, or summary notes. The tfoot tag has special behavior. Even though it appears after tbody in the rendered table, you can place it before or after tbody in your HTML code. Browsers will always display tfoot at the bottom of the table. When printing long tables, browsers may repeat the tfoot on each printed page, similar to thead. Using tfoot provides semantic meaning and allows separate styling of the footer section. It is optional but recommended for tables with summary rows.
Code Solution
SolutionRead Only
<!-- Table with tfoot -->
<table>
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>10</td>
<td>$20</td>
</tr>
<tr>
<td>Bananas</td>
<td>15</td>
<td>$30</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Total</td>
<td>$50</td>
</tr>
</tfoot>
</table>
<!-- Sales report with summary -->
<table>
<thead>
<tr>
<th>Month</th>
<th>Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$10,000</td>
</tr>
<tr>
<td>February</td>
<td>$12,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total Revenue</th>
<td>$22,000</td>
</tr>
</tfoot>
</table>