<tfoot> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
HTML Tables: Find Out When To Use Them (And When To Avoid)
What does <tfoot> HTML Tag do?
The <tfoot> element identifies one or more <tr> elements as containing summary contents of a table's columns. The <tfoot> element must be the direct descendant of a <table> element. In HTML5, <tfoot> can be placed either before or after <tbody> and <tr> elements, but must appear after any <caption>, <colgroup>, and <thead> elements.
Display
inline

Code Example

<table>
  <thead>
    <tr>
      <th>Numbers</th>
      <th>Letters</th>
      <th>Colors</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>6</td>
      <td>ABC</td>
      <td>Primary</td>
    </tr>
  </tfoot> 
  <tbody>
    <tr>
      <td>1</td>
      <td>A</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>2</td>
      <td>B</td>
      <td>Yellow</td>
    </tr>
    <tr>
      <td>3</td>
      <td>C</td>
      <td>Blue</td>
    </tr>
  </tbody>
</table>
NumbersLettersColors
6ABCPrimary
1ARed
2BYellow
3CBlue

Summarizing Table Contents

The tfoot element is used to provide summary information about the content of an HTML table. It can appear either before or after the table’s tbody element, but will be rendered at the bottom of the table regardless of where it appears in the HTML (unless that default behavior is overridden with CSS).

It’s a good idea to use tfoot, tbody, and thead to organize tables that contain complex data sets. These elements can be used by browsers and developers to allow users to scroll the contents of the table independently of the header and footer, providing a better user experience overall.

Adam is a technical writer who specializes in developer documentation and tutorials.