HTML <tfoot> Tag

The <tfoot> tag in HTML is used to define the footer content of a table. This section typically contains summary information, totals, or any other concluding remarks related to the table's data. The <tfoot> element is a semantic tag, meaning it gives meaning to the content it contains, making your HTML more accessible and understandable for both browsers and assistive technologies. It plays a critical role in organizing data within tables, and while its placement in HTML code might seem counter-intuitive, browsers display the <tfoot> at the bottom of the table.

Syntax

<table>
  <tfoot>
    <tr>
      <td>Footer content</td>
    </tr>
  </tfoot>
</table>

Attributes

Example

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$20</td>
    </tr>
     <tr>
      <td>Product B</td>
      <td>$30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$50</td>
    </tr>
  </tfoot>
</table>

More Examples

Basic Table with <tfoot>

This example demonstrates a simple table with a footer that shows the total price:

<table border="1">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$1200</td>
        </tr>
        <tr>
            <td>Mouse</td>
            <td>$25</td>
        </tr>
        <tr>
            <td>Keyboard</td>
             <td>$75</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$1300</td>
        </tr>
    </tfoot>
</table>

Here, the <tfoot> provides a summary of all the products and their total price. Even though the <tfoot> is placed at the bottom in HTML markup, browsers display it at the bottom of the rendered table.

Using colspan in <tfoot>

Often, you'll want to have a footer that spans multiple columns. This example shows how to use the colspan attribute to achieve this:

<table border="1">
    <thead>
        <tr>
            <th>Item</th>
            <th>Quantity</th>
             <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Apples</td>
            <td>10</td>
             <td>$10</td>
        </tr>
        <tr>
            <td>Bananas</td>
            <td>5</td>
            <td>$5</td>
        </tr>
         <tr>
            <td>Oranges</td>
            <td>7</td>
            <td>$7</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total</td>
            <td>$22</td>
        </tr>
    </tfoot>
</table>

Here, colspan="2" ensures that the cell containing "Total" spans two columns in the footer.

Stylized Table with <tfoot>

This example demonstrates how to style the footer for better readability using CSS:

<table style="width:100%; border-collapse: collapse;">
    <thead style="background-color:#f0f0f0;">
        <tr>
            <th style="padding: 8px; border: 1px solid #ddd;">Name</th>
            <th style="padding: 8px; border: 1px solid #ddd;">Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="padding: 8px; border: 1px solid #ddd;">Product A</td>
            <td style="padding: 8px; border: 1px solid #ddd;">5</td>
        </tr>
        <tr>
           <td style="padding: 8px; border: 1px solid #ddd;">Product B</td>
            <td style="padding: 8px; border: 1px solid #ddd;">10</td>
        </tr>
    </tbody>
    <tfoot style="font-weight: bold; background-color: #e0e0e0;">
        <tr>
           <td style="padding: 8px; border: 1px solid #ddd;">Total</td>
            <td style="padding: 8px; border: 1px solid #ddd;">15</td>
        </tr>
    </tfoot>
</table>

This example adds basic styling with style attributes for demonstration purposes to highlight the <tfoot>, including a bold font and background color. In a real project, you should do it with an external CSS.

Browser Support

Notes and Tips

• While the <tfoot> tag is usually placed after the <tbody> in HTML source code, browsers will correctly display it at the bottom of the table.
• The <tfoot> tag should be used in conjunction with the <thead> and <tbody> tags for proper semantic structure of HTML tables.
• Using <tfoot> helps assistive technologies such as screen readers to understand the table structure, making it more accessible to users with disabilities.
• Avoid using deprecated attributes like align, char, charoff, and valign. Instead, use CSS to style table elements.
• The primary purpose of <tfoot> is to provide supplementary information at the end of the table, such as sums, averages, or conclusions.
• For complex tables, having a well-structured <tfoot> can greatly enhance usability and data comprehension.