<tfoot>

Groups the footer content in a table

Definition and Usage

The <tfoot> tag is used to group footer content in an HTML table.

The <tfoot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).

Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

Tip: The <tfoot> element must have one or more <tr> tags inside.

Note: The <tfoot> element must be a child of a <table> element, and it can be placed before or after <tbody> elements in the HTML source, but it will always be rendered at the bottom of the table.

Browser Support

The <tfoot> tag is supported in all major browsers:

Chrome

Yes

Firefox

Yes

Safari

Yes

Edge

Yes

Opera

Yes

Attributes

The <tfoot> tag supports the Global Attributes in HTML.

The <tfoot> tag also supports the Event Attributes in HTML.

Deprecated Attributes

The following attributes are deprecated and should not be used. Use CSS instead:

Attribute	Value	Description
align	left right center justify char	Deprecated in HTML5 specifications. Specifies alignment of content
char	character	Deprecated in HTML5 specifications. Specifies alignment character
charoff	number	Deprecated in HTML5 specifications. Specifies character offset
valign	top middle bottom baseline	Deprecated in HTML5 specifications. Specifies vertical alignment

Examples

Basic Table with Tfoot

Create a simple table with header, body, and footer:

Example
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Summary Totals in Footer

Use tfoot to display calculation summaries:

Example
<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>2</td>
      <td>$2,000</td>
    </tr>
    <tr>
      <td>Mouse</td>
      <td>5</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>Keyboard</td>
      <td>3</td>
      <td>$150</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2"><strong>Grand Total</strong></td>
      <td><strong>$2,200</strong></td>
    </tr>
  </tfoot>
</table>

Multiple Footer Rows

Include multiple rows in the table footer:

Example
<table border="1">
  <thead>
    <tr>
      <th>Item</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$500</td>
    </tr>
    <tr>
      <td>Product B</td>
      <td>$300</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Subtotal</td>
      <td>$800</td>
    </tr>
    <tr>
      <td>Tax (10%)</td>
      <td>$80</td>
    </tr>
    <tr>
      <td><strong>Total</strong></td>
      <td><strong>$880</strong></td>
    </tr>
  </tfoot>
</table>

Styled Table Footer

Apply custom CSS styling to the table footer:

Example
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  thead {
    background-color: #745af2;
    color: white;
  }

  tfoot {
    background-color: #f4f4f4;
    font-weight: bold;
    border-top: 3px solid #745af2;
  }

  th, td {
    padding: 12px;
    text-align: left;
    border: 1px solid var(--border-color);
  }

  tbody tr:nth-child(even) {
    background-color: #f9f9f9;
  }
</style>

<table>
  <thead>
    <tr>
      <th>Department</th>
      <th>Budget</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Marketing</td>
      <td>$50,000</td>
    </tr>
    <tr>
      <td>Engineering</td>
      <td>$100,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total Budget</td>
      <td>$150,000</td>
    </tr>
  </tfoot>
</table>

Sticky Footer Table

Create a table with a sticky footer that remains visible when scrolling:

Example
<style>
  .table-container {
    max-height: 300px;
    overflow-y: auto;
    position: relative;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  tfoot {
    position: sticky;
    bottom: 0;
    background-color: var(--text-primary);
    color: white;
    z-index: 10;
  }

  th, td {
    padding: 12px;
    border: 1px solid var(--border-color);
  }
</style>

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <!-- Many rows here -->
      <tr>
        <td>Item 1</td>
        <td>$10</td>
      </tr>
      <!-- ... more rows ... -->
    </tbody>
    <tfoot>
      <tr>
        <td>Total</td>
        <td>$500</td>
      </tr>
    </tfoot>
  </table>
</div>

Complex Table with All Sections

Create a comprehensive table using thead, tbody, and tfoot:

Example
<table border="1">
  <thead>
    <tr>
      <th>Student Name</th>
      <th>Math</th>
      <th>Science</th>
      <th>English</th>
      <th>Average</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>85</td>
      <td>90</td>
      <td>88</td>
      <td>87.7</td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>92</td>
      <td>88</td>
      <td>95</td>
      <td>91.7</td>
    </tr>
    <tr>
      <td>Bob Johnson</td>
      <td>78</td>
      <td>82</td>
      <td>80</td>
      <td>80.0</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><strong>Class Average</strong></td>
      <td><strong>85.0</strong></td>
      <td><strong>86.7</strong></td>
      <td><strong>87.7</strong></td>
      <td><strong>86.5</strong></td>
    </tr>
  </tfoot>
</table>

Try it Yourself

Interactive Example

Here's a live example of a table with tfoot:

Product	Quantity	Price
Laptop	1	$1,000
Mouse	2	$40
Keyboard	1	$75
Total		$1,115

Try in Code Playground

Table Structure: thead, tbody, tfoot

A well-structured HTML table consists of three main sections:

<thead>: Contains the header rows with column titles
<tbody>: Contains the main data rows
<tfoot>: Contains the footer rows, typically summaries or totals

Structure Example
<table>
  <thead>
    <!-- Header rows with <th> elements -->
  </thead>
  <tbody>
    <!-- Data rows with <td> elements -->
  </tbody>
  <tfoot>
    <!-- Footer rows with summary data -->
  </tfoot>
</table>

Placement in HTML Source

An important feature of <tfoot> is that it can be placed before <tbody> in the HTML source code, but browsers will always render it at the bottom of the table:

Example
<table>
  <thead>
    <tr><th>Header</th></tr>
  </thead>

  <!-- tfoot appears before tbody in source -->
  <tfoot>
    <tr><td>Footer</td></tr>
  </tfoot>

  <tbody>
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <!-- Many more rows... -->
  </tbody>
</table>

<!-- Browser renders as: Header → Rows → Footer -->

Why is this useful? When working with dynamic tables that load many rows, placing <tfoot> before <tbody> allows the footer to be downloaded and displayed before all the body rows are loaded, improving perceived performance.

Accessibility Benefits

Using <tfoot> provides important accessibility benefits:

Screen readers: Can identify and announce footer content separately from body data
Navigation: Users can jump directly to footer summaries
Context: Helps users understand table structure and organization
Semantic meaning: Clearly indicates summary or total information
Print formatting: Browsers can repeat footer on each printed page for long tables

Best Practices

Use <tfoot> for summary information, totals, averages, or concluding data
Always use <tfoot> together with <thead> and <tbody> for well-structured tables
The <tfoot> element should contain at least one <tr> element
Use colspan in footer cells to span multiple columns for summary labels
Style footer rows differently from body rows to make summaries stand out
Consider using <th> elements in footer for column labels
Make footer content bold or visually distinct for better readability
For long scrollable tables, consider using sticky positioning for the footer
Ensure footer data is semantically meaningful and provides value to users

Default CSS Settings

Most browsers will display the <tfoot> element with the following default values:

Default CSS
tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

Related Tags

<table>
Defines a table
<thead>
Groups the header content in a table
<tbody>
Groups the body content in a table
<tr>
Defines a table row
<td>
Defines a table cell
<th>
Defines a table header cell