HTML and CSS Reference
In-Depth Information
Listing 7-15.
A table demonstrating usage of the
tfoot
element
<table>
<thead>
<tr>
<th scope="col">Product</th>
<th scope="col">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Utility Belts</th>
<td>9</td>
</tr>
<tr>
<th scope="row">Grappling Hooks</th>
<td>27</td>
</tr>
<tr>
<th scope="row">Smoke Pellets</th>
<td>623</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Totals</th>
<td>659</td>
</tr>
</tfoot>
</table>
Figure 7-6 shows how a browser renders the code from Listing 7-15. Note that the
tfoot
element itself
doesn't add any particular visual styling to the resulting output; it's simply a grouping element that adds
semantic value and improves the table's accessibility.
Figure 7-6.
Browser output of a table with a table footer row group
Previous versions of HTML required that the
tfoot
element appear in markup immediately following a
thead
element, despite the element being rendered visually at the bottom of the resulting table. As a
requirement, this was confusing for authors and, as such, has been amended in HTML5. The current
specification allows the
tfoot
element to appear in either of two places: