Written by Ben Hunt from web design agency Scratchmedia. For more information about his agency visit scratchmedia.co.uk

 

HTML <tfoot> table foot Tag Reference

Back to index of HTML/xHTML tags grouped by: « Family / « Importance / « A-Z

The tfoot HTML tag means table foot, and defines the foot section of a table.

Use it whenever your table contains summary data such as totals.

The <tfoot> HTML/xHTML tag

The table foot tag defines the footer section of a table. For some reason it comes before the <tbody> tag, presumably so that users with screen readers can quickly hear a summary of the table data without having to listen to all the data in the table.

The <tfoot> can contain one or more table rows<tr> , which can contain either table header <th> or table data <td> cells. Column footers can often contain totals or other data, in which case the cell ought to be a <td>. However, if the cell contains a label that identifies either the row in the table foot, or the column above it, it should be a <th>.

When to use the <tfoot> tag (semantic use)

You might use a <tfoot> tag to display totals in a table containing columns of figures. It's also useful when printing out tables that span several pages, as the <tfoot> information is repeated on each page.

It's valid in all current versions of HTML and xHTML, and it should always have a closing </tfoot> tag.

According to the specification, a table may have only one <tfoot>, and it must follow the  (if one is present), and precede the <tbody> (which is required in xHTML).

Example of <tfoot> tag use

Here's a table using all the tags, including <thead>, <tbody>, <tfoot>, with both <td> table data cells and <th> table header cells, and also a <caption> for good measure.
<table>
<caption>Your order</caption>
<thead>
<tr>
<th>ID</th>
<th>Product</th>
<th>Unit price</th>
<th>Units ordered</th>
<th>Total</th>
</tr>
</thead>
<tfoot>
<tr>
<th style="text-align: right;" colspan="4">Total price</th>
<td>&pound;10.85 </td>
</tr>
</tfoot>
<tbody>
<tr>
<th>1</th>
<td>Coffee</td>
<td>&pound;1.50</td>
<td>3</td>
<td>&pound;4.50</td>
</tr>
<tr>
<th>2</th>
<td>Turnips</td>
<td>&pound;0.90/kg</td>
<td>4</td>
<td>&pound;3.60</td>
</tr>
<tr>
<th>3</th>
<td>Rat's tails</td>
<td>&pound;0.25 / 6</td>
<td>11</td>
<td>&pound;2.75</td>
</tr>
</tbody>
</table>

Looks like...

Your order
ID Product Unit price Units ordered Total
Total price £10.85
1 Coffee £1.50 3 £4.50
2 Turnips £0.90/kg 4 £3.60
3 Rat's tails £0.25 / 6 11 £2.75

(Note, we've added styles to this table.)

Read offline

Buy ebooks safely with PayPalBuy sections of this site as downloadable PDF ebooks now