HTML tfoot Tag

HTML <tfoot> Tag: Table Footer Section

The <tfoot> tag in HTML is used to define the footer content of a table. It is placed after the <tbody> section and is typically used for summary rows, such as totals or calculations.

1. Basic Syntax

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$1000</td>
    </tr>
    <tr>
      <td>Phone</td>
      <td>$500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$1500</td>
    </tr>
  </tfoot>
</table>

✅ Displays a footer row with the total value.

2. Why Use <tfoot>?

• Structure and Organization: This separates summary or footer information from the body (<tbody>).

• Accessibility: Provides clear organization for users and screen readers.

• Keeps Footer at the Bottom: In some cases, the footer stays visible at the bottom, especially in long tables.

3. Example of Using <tfoot> with Calculations

<table border="1">
  <thead>
    <tr>
      <th>Item</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apple</td>
      <td>$2</td>
    </tr>
    <tr>
      <td>Banana</td>
      <td>$1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$3</td>
    </tr>
  </tfoot>
</table>

✅ Shows the total price of items in the footer.

4. Styling <tfoot> with CSS

You can style the footer with CSS:

<style>
  tfoot {
    background-color: #f2f2f2;
    font-weight: bold;
  }
</style>

<table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$1000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$1000</td>
    </tr>
  </tfoot>
</table>

✅ Styles the footer with a light background and bold text.

5. Conclusion

• The <tfoot> tag is used to define footer rows in a table.

• It is useful for summarizing information like totals, averages, etc.

• The <tfoot> is placed after the " but " <tbody> but before the end of the <table>.

• It can be styled and is especially helpful in large tables with summaries or calculations.