Add a Footer with tfoot element
Description
The tfoot
element marks the table footer.
The tfoot
element can appear before or
after the tbody
or tr
elements.
The align, char, charoff
, and valign
attributes are obsolete.
Prior to HTML5, the tfoot
element had to appear
before the tbody
element.
In HTML5, you can put the tfooter
element after the tbody
or the last tr
element.
Example
The following code shows how the tfoot
element can be used to create a
footer for a table
element.
<!DOCTYPE HTML>
<html>
<head>
<style>
thead th, tfoot th {<!-- ww w .j a v a2 s. com-->
text-align: left;
background: grey;
color: white
}
tbody th {
text-align: right;
background: lightgrey;
color: grey
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Rank</th>
<th>Name</th>
<th>Color</th>
<th>Size</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Rank Footer</th>
<th>Name Footer</th>
<th>Color Footer</th>
<th>Size Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<th>Favorite:</th>
<td>XML</td>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<th>2nd Favorite:</th>
<td>Java</td>
<td>Javacript</td>
<td>Oracle</td>
</tr>
<tr>
<th>3rd Favorite:</th>
<td>Json</td>
<td>Text</td>
<td>CSV</td>
</tr>
</tbody>
</table>
</body>
</html>