HTML - <tfoot> Tag

The set of rows that serve as an HTML table's footer are defined using the <tfoot> tag. There must be one or more <tr> elements in the <tfoot> tag. The <tfoot> tag is used as a child element of the HTML table (<table>), together with the <thead> and <tbody> elements. Where <thead> element specifies the table header, and the <tbody> element specifies the table body.

It is frequently utilised to show column totals and can be used to summarise the columns in a table. Traditionally, the <tfoot> tag would be styled with CSS to draw attention to the column totals.

By default, the <thead>, <tbody>, and <tfoot> elements have no impact on how the table is organised. However, you can style these elements with CSS.

Syntax

Following is the syntax for HTML <tfoot> tag −

<tfoot>...</tfoot>

Example

Following is an example where we are going to use the <tfoot> tag in the HTML table. 

<!DOCTYPE html>
<html>
<body>
   <table border="1">
   <thead>
      <tr>
         <th>Students</th>
         <th>English Marks</th>
         <th>Hindi Marks</th>
      </tr>
   </thead>
   <tfoot>
      <tr>
         <th colspan="3">Juliet - the best Performer!</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>John</td>
         <td>28</td>
         <td>25</td>
      </tr>
      <tr>
         <td>Peterson</td>
         <td>25</td>
         <td>25</td>
      </tr>
      <tr>
         <td>Juliet</td>
         <td>29</td>
         <td>29</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

On running the above code, the output window will pop up, dispaying the table along with a footer added to the table on the webpage.

Example

Consider another scenario where we are going to use the <tfoot> tag in the table and apply CSS to it.

<!DOCTYPE html>
<html>
   <style>
      tfoot {
         background-color: #3f87a6;
      }
   </style>
<body>
   <table border="1">
      <thead>
         <tr>
            <th>Items</th>
            <th>Price</th>
         </tr>
      </thead>
   <tfoot>
      <tr>
         <th>Total</th>
         <th>75</th>
      </tr>
   </tfoot>
   <tbody>
      <tr>
         <td>5-Star</td>
         <td>10</td>
      </tr>
      <tr>
         <td>Dairy-Milk</td>
         <td>45</td>
      </tr>
      <tr>
         <td>KitKat</td>
         <td>20</td>
      </tr>
   </tbody>
   </table>
</body>
</html>

When we execute the above code, it will generate an output consisting of a table along with CSS applied to the <tfoot> tag displayed on the webpage.

Example

Let’s consider the following example, where we are going to align the content inside the <tfoot> tag to the right side using CSS.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #DE3163;
      }
   </style>
<body>
   <table style="width:50%">
      <tr>
         <th>Students</th>
         <th>Gathered Amount</th>
      </tr>
      <tr>
         <td>Ram</td>
         <td>$200</td>
      </tr>
      <tr>
         <td>Suresh</td>
         <td>$800</td>
      </tr>
      <tr>
         <td>Maya</td>
         <td>$500</td>
      </tr>
      <tfoot style="text-align:right">
         <tr>
            <td>Total</td>
            <td>$1500</td>
         </tr>
         </tfoot>
   </table>
</body>
</html>

On running the above code, the output window will pop up, consisting of a table along with text that comes under the <tfoot> tag and is aligned to the right using the CSS.

Example

In the following example, we are going to use the vertical align property and make the content inside the <tfoot> tag align in the middle.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.5px solid #82E0AA;
      }
   </style>
<body>
   <table style="width:40%">
      <tr>
         <th>ID</th>
         <th>Employee</th>
      </tr>
      <tr>
         <td>12234</td>
         <td>Maya</td>
      </tr>
      <tr>
         <td>12235</td>
         <td>John</td>
      </tr>
      <tr>
         <td>12236</td>
         <td>Kevin</td>
      </tr>
      <tfoot style="vertical-align:middle">
         <tr style="height:100px">
            <td>Total Employees</td>
            <td>3</td>
         </tr>
      </tfoot>
   </table>
</body>
</html>

When we execute the above code, it will generate an output consisting of a table along with a CSS vertical align property for the <tfoot> tag.

html_tags_reference.htm
Advertisements