The <tfoot> HTML Element

Overview

The <tfoot> element is used to define a block of rows containing the summaries (footers) for the columns in a table. The element participates in the table model.

Examples and Usage

Consider an illustrative example of a table displaying somewhat arbitrary monthly expenses. In this case, the <tfoot> element can offer a summary or total of the columns.

<table>
  <thead>
    <tr>
      <th>Expense Type</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Rent</td>
      <td>$1,400</td>
    </tr>
    <tr>
      <td>Utilities</td>
      <td>$300</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$1,700</td>
    </tr>
  </tfoot>
</table>

In the given example, the main container for the table is represented by the <table> element. Directly inside it, we have three important child elements: <thead>, <tbody>, and <tfoot>.

According to HTML standards, these elements should appear in a specific sequence within the <table> element. In our example, we've followed the recommended structure: <thead> appears first, followed by <tbody>, and finally <tfoot> comes last. This sequence ensures that if you include a <tfoot>, it should be positioned after any <caption>, <colgroup>, <thead>, <tbody>, or even <tr> elements, but still within the <table> element.

Note that the table should not contain more than one <tfoot> to maintain valid HTML. Following this specific order is not just a formality; it allows for easier data interpretation and more effective table management.

Now, let's turn our attention to the visual aspects. To make the table a bit more visually appealing and easy to read, let's add some foundational CSS.

table {
  border-collapse: collapse;
  border: 2px solid #ccc;
  font-size: 18px;
}

This sets the table's border, collapses adjacent cell borders, and establishes a base font size.

For the table cells, we can use:

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

These rules target all table cells, setting a light gray border, padding, and text alignment.

Finally, let's style the <tfoot> to make the summary row stand out:

tfoot > tr > td {
  background-color: #f2f2f2;
  font-weight: bold;
}

Here, we're giving the footer a distinct background color and making the text bold to emphasize that it contains summary information.

We should also note that this example serves as a basic guideline; real-world scenarios will often require a more nuanced approach to table design and styling, including additional table-related elements and attributes.

Attribute Breakdown

The <tfoot> element historically permitted various attributes for controlling alignment and background color. However, most of these attributes are now considered deprecated in favor of CSS. The element also includes all global HTML attributes.

Accessibility Aspects

The <tfoot> element has an implicit ARIA role of rowgroup. Detailed information on this can be found in the official specification.

Associated Elements

<table>
<tbody>
<td>
<th>
<thead>
<tr>
<caption>
<col>
<colgroup>

Additional Notes

Deprecated attributes like align, bgcolor, char, charoff, and valign were used for alignment and background color within the associated sections of a table. Modern practices replace these with CSS properties such as text-align, background-color, and vertical-align.