Open In App

How to group footer content in form of table using HTML ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we define the group of footer content in a table by using the <tfoot> tag in HTML. It  is used in HTML table with header and body which is known as “thead” and “tbody”. <tfoot> tag is child tag of table and parent tag of <tr> and <td>. 

Syntax:  

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

Example:   

HTML




<!DOCTYPE html>
<html>
  
<head>
  
    <style>
        h1 {
            color: green;
        }
  
        tfoot {
            color: blue;
        }
  
        table,
        tbody,
        td {
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
  
        <h2>
            How to group the footer content 
            in a table using HTML ?
        </h2>
          
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th> Id</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Mukesh</td>
                    <td>Shivam_b</td>
                </tr>
                <tr>
                    <td>Shashank</td>
                    <td>@shashankla</td>
                </tr>
                <tr>
                    <td>Rahman</td>
                    <td>@rahamD</td>
                </tr>
            </tbody>
  
            <!-- tfoot tag starts from here -->
            <tfoot>
                <tr>
                    <td>Total user</td>
                    <td>4</td>
                </tr>
            </tfoot>
            <!-- tfoot tag ends here -->
  
        </table>
    </center>
</body>
  
</html>


Output 

Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 15 Oct, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads