Qarpeo LogoInstitute

<tfoot>

The HTML <tfoot> element specifies the footer of a table, commonly used to consolidate summary or aggregate data. It is often styled uniformly with the other rows in the table.

<tfoot> Tag

The <tfoot> element is used to group the footer rows of a table. It generally contains summary information or additional details related to the table's content and is displayed at the bottom of the table.

Syntax

index.html
<table>
  <thead> ... </thead>
  <tfoot>
    <tr>
      <td> ... </td>
    </tr>
  </tfoot>
  <tbody> ... </tbody>
</table>

<tfoot> Demo

Name Age City
John 25 New York
Jane 30 Los Angeles
Total 55
index.html
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>55</td> <!-- Example of summing ages -->
      <td></td>
    </tr>
  </tfoot>
</table>

Attributes

  • align (Deprecated in HTML5): Specifies horizontal alignment of content:
    • left: Aligns content to the left.
    • center: Centers the content.
    • right: Aligns content to the right.
    • justify: Stretches text to fit the cell.
    • char: Aligns content to a specific character using char and charoff (not widely supported).

See Also

  • Other table-related HTML elements:

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

CSS properties and pseudo-classes that can help style the <tfoot> element:
  • The :nth-child pseudo-class to target specific rows.
  • The text-align property to align content within cells, including aligning text on a specific character like '.'.

Conclusion

The <tfoot> element in HTML is used to group footer rows in a table, typically containing summary information or totals. It is placed at the bottom of the table, after the <tbody>, but before the closing <table> tag.

<colgroup>

The HTML <colgroup> element clusters multiple <col> elements in a table, enabling the application of common styles and properties to those columns for improved formatting.

Images

HTML images, added using the (<img>) tag, enhance content and engagement. Key attributes include (src) for the source, (alt) for accessibility, and (width/height) for sizing.