<tfoot>

Draft

Definition

The <tfoot> HTML element is used to define the footer section of a table. It is typically used to group together the footer rows (<tr>) that contain summary or additional information related to the table’s content.

Here’s an example of how to use the <tfoot> element:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>$10</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td>$15</td>
      <td>1</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">Total</td>
      <td>$35</td>
    </tr>
  </tfoot>
</table>

In this example, the <tfoot> element is used to enclose the footer row (<tr>) that contains the total value of the items in the table. The colspan attribute is used to span the first two cells of the footer row, merging them into a single cell.

The <tfoot> element is often used to display summary information, calculations, or other data related to the table’s content. It is typically placed after the <tbody> element and before the closing </table> tag.

It’s important to note that the <tfoot> element is optional. If there is no need for a footer section in the table, you can omit it entirely.

In summary, the <tfoot> element is used to define the footer section of a table. It allows you to group together footer rows that contain summary or additional information related to the table’s content. By using the <tfoot> element, you can create well-structured tables with header, body, and footer sections to present data and provide additional context or summaries.

Related posts