Tfoot Tag in HTML5

In this article I am going to describe about Tfoot Tag in HTML5.
  • 1479

Tfoot Tag in HTML5

<tfoot> tag is used to specify the group of footer content of the table body.For example, the footer can include a total of the numerical values in a column or some other column summary for non-numerical columns.

 In the table we must have zero or more <tr> tag inside the <tfoot> tag. The <tfoot> tag is used in conjunction with <tbody>, <thead> in the <table> tag. Simply <tfoot> tag is used for adding afooter to the table.

The <tfoot> tag must have one or more <td> tag within <tr> tag which is nested in <tfoot>. The <tfoot> tag is the child of <table> tag and used after the <caption>, <colgroup>, <thead> tag and before the <tbody> tag. This tag must have opening and closing tags.

The <tfoot> tag comes before <tbody> tag because when the table is displayed on multiple pages, such as when printing web pages, the table footer will appear at the bottom of those rows of a table that fit on a page, before the rest of the body of the table has been rendered.

Browser Support

It is supported in all major browsers.

Syntax

The syntax of thead,tbody,tfoot tag is shown below

<body>

    <table>

        <thead>

            <tr>

                <th>......</th>

                <th>.....</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>....</td>

                <td>....</td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td>....</td>

                <td>....</td>

            </tr>

        </tfoot>

    </table>

</body>

Attributes of <tfoot> tag in HTML5

None of the HTML 4.01 attributes (such as align, char, charoff, valign) are supported in HTML5.

Example of <tfoot> tag in HTML5

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title>Tfoot Tag in HTML5</title>

    <style type="text/css">

        thead

        {

            color: green;

        }

 

        tbody

        {

            color: blue;

        }

 

        tfoot

        {

            color: red;

        }

    </style>

</head>

<body>

    <h2>Implementation of thead,tbody,tfoot Tag in HTML5</h2>

    <table border="1">

        <thead>

            <tr>

                <th>Name</th>

                <th>Salary</th>

            </tr>

        </thead>

        <tfoot>

            <tr>

                <td>Sum</td>

                <td>$180</td>

            </tr>

        </tfoot>

        <tbody>

            <tr>

                <td>Ashwani</td>

                <td>$1000</td>

            </tr>

            <tr>

                <td>Rahul</td>

                <td>$800</td>

            </tr>

        </tbody>

    </table>

    <p><b>Note:</b> The &lt;tfoot&gt; element must have one or more &lt;tr&gt; tags inside.</p>

</body>

</html>

Output

tfoot.jpg

© 2019 DotNetHeaven. All rights reserved.