HTML Tutorial

HTML Tag: <tfoot>

The <tfoot> tag in HTML serves as a container for footer content in a table. It is typically used to display summary information or additional details related to the table's data.

Usage of <tfoot>

To use the <tfoot> tag, simply wrap the footer content within it, like this:

<table>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>100</td>
    </tr>
  </tfoot>
</table>

Attributes of <tfoot>

<tfoot> doesn't have any specific attributes.

Examples with <tfoot>

In this example, the tag is used to display a total row at the bottom of a table:

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>$10</td>
      <td>5</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td>$15</td>
      <td>3</td>
      <td>$45</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th>Total</th>
      <th>$95</th>
    </tr>
  </tfoot>
</table>

Exploring the <tfoot> Tag

To explore the <tfoot> tag further, you can use the following HTML code in your browser:

<!DOCTYPE html>
<html>
<head>
<title><tfoot> Example</title>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
      <th>Quantity</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Item 1</td>
      <td>$10</td>
      <td>5</td>
      <td>$50</td>
    </tr>
    <tr>
      <td>Item 2</td>
      <td>$15</td>
      <td>3</td>
      <td>$45</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th></th>
      <th></th>
      <th>Total</th>
      <th>$95</th>
    </tr>
  </tfoot>
</table>
</body>
</html>