HTML <tfoot> Tag for Table Footer

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <tfoot> Tag in HTML 5

The <tfoot> tag is used to create a table footer in HTML. For example, the footer can include a total of the numerical values in a column or some other column summary for non-numerical columns. When the table spans multiple pages, such as when a large table on a web page is printed, the table footer code within the tfoot element will appear on each page below the table body.

Table Caption
	Multiple Column Heading
	First Column Heading	Second Column Heading
→This is an example of an HTML table footer.←
Row 1	Row 1 Column 1	Row 1 Column 2
Row 2	Row 2 Column 1	Row 2 Column 2

This is an actual working demo of the table footer example code below. (Do View Source to verify that this page is using the HTML 5 DOCTYPE. You can also verify it is Valid HTML 5 using the HTML Validator. Try using it to validate URLs with HTML examples from other places that claim to be HTML 5 web sites!)

See the tutorial on Creating HTML Tables for full details on how to create an HTML table using the HTML table tags together.

<tfoot> Tag Syntax

<body>
   ... flow content expected ...
   <table>
      <thead>
         <tr>
            <th>...</th>
            ...
         </tr>
      </thead>
      <tbody>
         <tr>
            <td>...</td>
            ...
         </tr>
      </tbody>
      <tfoot>
         <tr>
            <td>...</td>
            ...
         </tr>
      </tfoot>
   </table>
</body>

As shown in HTML Table Tutorial - How To Create Tables in HTML the <tfoot> tag comes before the <tbody> tag for the HTML table body. This is because when the table is displayed on multiple pages, such as when printing web pages, the table footer will appear at the bottom of those rows of a table that fit on a page, before the rest of the body of the table has been rendered.

Rules for coding the HTML `tfoot` element

Child Elements of the <tfoot> tag

<> tag(s): A <tr> tag for each table row with <td> tag(s) for each table cell in the table footer.

<tfoot> Tag Attributes

Attributes of the <tfoot> tag

global attributes

In addition to the personal attributes of the <tfoot> tag below, any of the common HTML attributes can also be coded.

<tfoot> Tag Examples

Examples of the `tfoot` tag in HTML 5

Here is the HTML code for the table demo above:

<table>
   <caption>Table Caption</caption>
   <colgroup>
      <col style="width: 20%"/>
      <col style="width: 80%"/>
   </colgroup>
   <thead>
      <tr>
         <th rowspan="2"></th>
         <th colspan="2">Multiple Column Heading</th>
      </tr>
      <tr style="vertical-align: bottom">
         <th>First Column Heading</th>
         <th>Second Column Heading</th>
      </tr>
   </thead>
   <tfoot>
      <tr><td colspan="2">This is an example of an HTML table footer.</td></tr>
   </tfoot>
   <tbody>
      <tr>
         <td>Row 1 Column 1</td>
         <td>Row 1 Column 2</td>
      </tr>
      <tr>
         <td>Row 2 Column 1</td>
         <td>Row 2 Column 2</td>
      </tr>
   </tbody>
</table>

Changes in HTML 5 - <tfoot> Tag

What's new in HTML 5

Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the tfoot element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5