What is the <tfoot> element in HTML?

The <tfoot> tag stands for table footer.

There are three parts of a table in HTML:

  • header
  • body
  • footer

The <tfoot> tag is used to define the footer.

The <tfoot> tag is used mostly to show the summary of the data shown in the body of the table. The <tfoot> tag must contain one or more <tr> tags inside it.

The <tr> tag is used to create a row in the header, body, or footer.

Using the <tfoot> tag allows the user to view and scroll through the data more conveniently.

The <tfoot> tag can be defined anywhere inside the <table> tag, but HTML will render it after the <tbody> tag. This is HTML’s default behavior.

Syntax

<table>
  <tfoot>
    <tr/>
    <tr/>
  </tfoot>
</table>

The above snippet of code describes how to use the <tfoot> tag in HTML. We begin by opening the tags using the <> symbol. In between, we write tfoot. We then close the tags using the </> symbol. We will, once again, place the name of our tag in-between <> and after the / symbol. The <tfoot> tag can contain one or more child rows.

The <table> tag creates the table. The <tfoot> tag must always be the child of the <table> tag, as shown. The table’s footer can have multiple rows, and each row can have multiple children tags like <td>.

Example

  • HTML

The code above shows one example of how we can use tfoot tag in HTML.

In the above example, a simple table is created using the <table> tag. The header and body are not defined in this case. Only the footer of the table is defined with the <tfoot> tag. This table mentions the name of a fruit and its quantity.

In the above snippet, the <tr> tag is used to define a single row in the table. The <td> tag is used to define a single standard data cell in each row.

Free Resources

Copyright ©2024 Educative, Inc. All rights reserved