HTML <tfoot> tag

Updated: 09/12/2023 by Computer Hope
HTML tfoot tag

When writing in HTML (hypertext markup language), the <tfoot> tag designates a set of rows that summarize the columns on a table. It is useful for sectioning off parts of the table to be styled with CSS (cascading style sheets). The following sections contain information about the <tfoot> tag, including an example of it in use, and related attributes and browser compatibility.

Tip

More advanced tables may include the <caption>, <col>, <colgroup>, <tbody>, or <thead> elements.

Tip

Using the <thead> and <tfoot> elements ensures that a header and footer appear on each page of a large table printout.

Example of <tfoot> code

<table class="mtable2 tab">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr class="tcw">
      <td>March</td>
      <td>$200</td>
    </tr>
    <tr class="tcw">
      <td>April</td>
      <td>$300</td>
    </tr>
    <tr class="tcw">
      <td>May</td>
      <td>$250</td>
    </tr>
  </tbody>
  <tfoot>
    <tr class="tcw">
      <td>Total</td>
      <td>$750</td>
    </tr>
  </tfoot>
</table>

Example result

Month Savings
March $200
April $300
May $250
Total $750

We have added a few of our own classes to the table using CSS; this action allows us to improve its appearance.

Deprecated attributes

All HTML tags support standard attributes that define the settings of an HTML element. In addition to the standard settings, the <tfoot> tag had the following unique attributes that are now deprecated.

Attribute Description
align Designates the alignment of content inside an element.
char Aligns the content in a <tfoot> element to a specific character.
charoff Sets the number of characters to offset the content from the character designated by the char attribute.
valign Alights the content in a <tfoot> element vertically.

Compatibility

Edge Internet Explorer Firefox Safari Opera Chrome
All versions All versions All versions All version All versions All versions

Browser, Cell, Class, Column, Compatibility, Container tag, Format, Row, <table>, <tbody>, <thead>, Web design terms