HTML `` Element: Creating Table Footers for Summary Data and Improved Accessibility

Learn how to use the HTML `` element to add semantically correct and accessible footers to your tables. This tutorial explains its purpose, placement within the table structure, and how to style it using CSS for clear presentation of summary data or totals, enhancing both the structure and accessibility of your tables.

Using the HTML `` Element for Table Footers

Understanding Table Footers

The HTML `<tfoot>` (table footer) element is a container for summary information at the bottom of an HTML table. It's used to present aggregated data, totals, or other summary statistics related to the table's data. While the `<tfoot>` element itself doesn't automatically style the footer, it adds semantic meaning, improving accessibility for assistive technologies and overall code organization. The visual appearance of the footer is usually controlled using CSS.

Creating a Table Footer

The `<tfoot>` element is placed within the `

` tag, after the `` (table body) and `` (table header) elements. The footer content is placed inside the opening and closing `<tfoot>` tags. The `<tfoot>` element should contain one or more table rows (`<tr>`).

Example Table with Footer

<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>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Browser Support for `

`

The `<tfoot>` element is widely supported by modern browsers.

Browser Support
Chrome Yes
Edge Yes
Firefox Yes
Opera Yes
Safari Yes

Styling Table Footers with CSS

You can style the `<tfoot>` element using CSS to create a visually distinct footer. For example:

Example: Styling `<tfoot>` with CSS

tfoot {
  font-weight: bold;
  background-color: #f0f0f0;
}