Skip to content
Related Articles

Related Articles

How to add table footer in HTML ?

Improve Article
Save Article
Like Article
  • Last Updated : 13 Jan, 2022

To add a table footer on an HTML table you can use the HTML tfoot tag. The footer is required when the developer wants to show the conclusion or the result of the table data in a single row.

Syntax:

<tfoot> // Table footer contents... </tfoot>

Below example will illustrate the concept of table footer and clear your thoughts about how to create a table footer in HTML.

Example: In this example, we will create a table that contains 2 courses and a price with the total price at the table footer.

HTML




<!DOCTYPE html>
<html>
   <head>
      <style>
         h1 {
         color: green;
         }
         table, th, td {
         border: 2px solid black;
         }
      </style>
   </head>
   <body>
      <center>
         <h1>GeeksforGeeks</h1>
         <h2>How to create table footer in HTML</h2>
         <table>
            <thead>
               <tr>
                  <th>Course</th>
                  <th>Price</th>
               </tr>
            </thead>
            <tbody>
               <tr>
                  <td>ReactJS</td>
                  <td>$39</td>
               </tr>
               <tr>
                  <td>JavaScript</td>
                  <td>$23</td>
               </tr>
            </tbody>
            <tfoot>
               <tr>
                  <td>Total</td>
                  <td>$62</td>
               </tr>
            </tfoot>
         </table>
      </center>
   </body>
</html>

Output:

Table Footer

Table Footer


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!