The tfoot tag
The tfoot tag defines the bottom of the table. It is used to group rows so that CSS styles can be applied to a group at once. There can only be one tfoot tag in one table.
The tfoot tag is often used together with thead and tbody to define the header, body, and footer of an HTML table. By default, the browser will put the contents of tfoot at the foot of the table, and thead at the top.
Example
Let's add red text color to the group of rows united by the tfoot tag using the color property:
<table>
<thead>
<tr>
<th>Name</th>
<th>Surn</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>name1</td>
<td>surn1</td>
<td>200$</td>
</tr>
<tr>
<td>name2</td>
<td>surn2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>count: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Example
And here, let's see, thead is not on top, and tfoot is not on the bottom, nevertheless the browser puts them in their places:
<table>
<tfoot>
<tr>
<td>count: 2</td>
<td>-</td>
<td>total: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>name1</td>
<td>surn1</td>
<td>200$</td>
</tr>
<tr>
<td>name2</td>
<td>surn2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>Name</th>
<th>Surn</th>
<th>Salary</th>
</tr>
</thead>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
