How to use header & footer in HTML table ?

Last Updated : 30 Jan, 2022

The <thead> and <tfoot> tags are used to separate the table into header and footer, which becomes useful when we are dealing with tables having a large amount of data.

In this article, we would be discussing how to use the header and footer tags in HTML. For that purpose, we have created an HTML table using the <thead>, <tbody> and <tfoot> tags.

HTML <thead> tag: The <thead> tag in HTML is used to create a table header and usually appears after the <colgroup> or <caption> tags and it should appear before the <tbody> and <tfoot> tag.

Syntax:

<thead>Table header content</thead>

HTML <tbody> tag: The <tbody> tag in HTML is used to group the content of the table together and is usually used along with the <thead> and <tfoot> tags. It must be declared after the <thead> tag and can be declared before or after the <tfoot> tag in HTML.

Syntax:

<tbody>Table body content</tbody>

HTML <tfoot> tag: The <tfoot> tag in HTML is used to create a table footer that appears after the <thead> tag and it can be declared before the <tbody> tag but the browser will read it as it has been declared after the <tbody> tag. It is been advised to use it after the <tbody> tag.

Syntax:

<tfoot>Table footer content</tfoot>

Note: Using the header and footer tag in HTML will not make any difference to the rows compared with other rows but will help the browser to distinguish between the data and the header and footer section in the table.

Example: In the code below, we have used the header and footer tags in the HTML table.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewpoint" content= 
        "width=device-width, initial-scale=1.0"> 
  
    <style> 
        thead, 
        tfoot { 
            background-color: green; 
            color: white; 
        } 
  
        tr th { 
            background-color: green; 
            color: white; 
        } 
  
        td { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <table width="70%" height="170px" 
        border cellspacing="0"> 
  
        <!-- thead tag specifies the header of  
            this table and starts here -->
        <thead> 
            <tr> 
                <th>Items/Kg</th> 
                <th>Monday</th> 
                <th>Tuesday</th> 
                <th>Wednesday</th> 
                <th>Thursday</th> 
                <th>Friday</th> 
            </tr> 
        </thead> 
        <!-- thead tag ends here -->
  
        <!-- tbody tag specifies the body of  
            this table and starts here -->
        <tbody> 
            <tr> 
                <th>Oranges</th> 
                <td>₹40</td> 
                <td>₹80</td> 
                <td>₹40</td> 
                <td>₹120</td> 
                <td>₹40</td> 
            </tr> 
            <tr> 
                <th>Mangoes</th> 
                <td>₹60</td> 
                <td>₹85</td> 
                <td>₹50</td> 
                <td>₹100</td> 
                <td>₹30</td> 
            </tr> 
            <tr> 
                <th>Apples</th> 
                <td>₹80</td> 
                <td>₹90</td> 
                <td>₹120</td> 
                <td>₹120</td> 
                <td>₹90</td> 
            </tr> 
        </tbody> 
        <!-- tbody tag ends here -->
  
        <!-- tfoot tag specifies the footer of  
            this table and starts here -->
        <tfoot> 
            <tr> 
                <th>Total</th> 
                <td>₹180</td> 
                <td>₹255</td> 
                <td>₹210</td> 
                <td>₹340</td> 
                <td>₹160</td> 
            </tr> 
        </tfoot> 
        <!-- tfoot tag ends here -->
    </table> 
</body> 
  
</html> 