Open In App

How to use header & footer in HTML table ?

Last Updated : 30 Jan, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:



Previous Article
Next Article

Similar Reads

Semantic-UI Table Full-Width Header / Footer Variation
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements. Tables are an easy way to organize a lot of data. A table is an arrangement of data in rows
3 min read
How to Create Sticky Header/Footer on a Web Page using HTML CSS and JavaScript ?
When designing a website, it's essential to consider the sticky header and footer. These elements enhance the user experience by keeping important navigation links accessible as users scroll. This article explores creating sticky headers and footers with CSS. We can do this by using the following CSS propertiesPosition: sticky; is a CSS property th
7 min read
How to print header and footer on every printed page of a document in CSS ?
Printing a header and footer on every page of a document can make the document look more professional and easier to read. In this article, we will discuss how to use CSS to print a header and footer on every printed page of a document. Syntax: To print a header and footer on every printed page, you can use the following CSS syntax. @media print { h
4 min read
Blaze UI Cards Header Body and Footer
Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it
2 min read
Angular PrimeNG Carousel Header and Footer
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use Basic Carousel in Angular PrimeNG. Angular PrimeNG Basic Carousel is used to render the basic carousel. The carou
4 min read
Angular PrimeNG Dialog Header and Footer
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use Dialog Header and Footer in Angular PrimeNG. We will also learn about the properties along with their syntaxe
3 min read
Angular PrimeNG Panel Header and Footer Content
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. This article will show us how to use the Panel Header and Footer Content in Angular PrimeNG. We will also learn about the properties, along with their
3 min read
Angular PrimeNG Galleria Header and Footer
Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will see Angular PrimeNG Galleria Header and Footer. The Galleria is an advanced content gallery component. It is used for display
4 min read
How to group footer content in form of table using HTML ?
In this article, we define the group of footer content in a table by using the &lt;tfoot&gt; tag in HTML. It is used in HTML table with header and body which is known as “thead” and “tbody”. &lt;tfoot&gt; tag is child tag of table and parent tag of &lt;tr&gt; and &lt;td&gt;. Syntax: &lt;tfoot&gt; // Table footer contents... &lt;/tfoot&gt; Example:
1 min read
How to add table footer in HTML ?
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: &lt;tfoot&gt; // Table footer contents... &lt;/tfoot&gt; Below example will illustrate the concept of table footer and clear your thoughts about how to
1 min read