Open In App

HTML DOM TFoot Object

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML DOM tfoot object is used to represent the HTML <tfoot> element . The <tfoot> object is used to group HTML table content for footer part of the document.  The <tfoot> object is used with the <thead>, <tbody> elements  of the HTML document. Now a days the <tfoot> object is deprecated and not in use.

Accessing tfoot object: We can easily access the tfoot object by using getElementById() method. 

Syntax:

document.getElementById() 

Property Values

  • align: Set the alignment of the text content.
  • valign: It is used to set the vertical alignment of text content.
  • char: Aligns the content in a header cell to a character.
  • charoff: It is used to sets the number of characters that will be aligned from the character specified by the char attribute. The value of these attributes is in numeric form.

Example 1: Below HTML code illustrates how to change the background color of a <tfoot> element. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>
            GeeksforGeeks
        </h1>
 
         
 
<p><b>HTML DOM TFoot Object </b></p>
 
 
        <table>
            <thead>
                <tr>
                    <td>Username</td>
                    <td>User_Id</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Shashank</td>
                    <td>@shashankla</td>
                </tr>
            <tfoot id="tfootID" bgcolor="green">
                <tr>
                    <td>GeeksforGeeks</td>
                    <td>@geeks</td>
                </tr>
            </tfoot>
            </tbody>
        </table>
         
 
<p>
            Click on the button to change the
            background color of tfoot element
        </p>
 
 
 
        <button onclick="btnclick()">
            Click here
        </button>
        <p id="paraID"></p>
 
 
    </center>
 
    <script>
        function btnclick() {
            var thead = document
                .getElementById("tfootID");
                 
            thead.style.backgroundColor = "red";
        }
    </script>
</body>
 
</html>


Output: 

Creating a tfoot object: We can easily create a tfoot object by using the following.

Syntax:

document.createElement() 

Example 2: Below HTML code is used to create a tfoot object by using a createElement() method.   

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        table,
        th,
        td {
            border: 1px solid green;
        }
    </style>
</head>
 
<body>
    <center>
        <h1>
            GeeksforGeeks
        </h1>
 
        <h2>HTML DOM tfoot object</h2>
 
        <table id="tableID">
            <thead>
                <tr>
                    <td>Name</td>
                </tr>
            </thead>
            <tr>
                <td>Manas</td>
            </tr>
            <tr>
                <td>Hritik</td>
            </tr>
            </thead>
        </table>
         
         
 
<p>
            Click button to create tfoot element.
        </p>
 
 
         
        <button onclick="btnclick()">
            Click here
        </button>
    </center>
 
    <script>
        function btnclick() {
 
            /* Create tfoot element */
            var X = document.createElement("TFOOT");
             
            /* Create tr element */
            var Y = document.createElement("TR");
             
            /* Create td element */
            var Z = document.createElement("TD");
             
            Z.innerHTML = "Govind";
            Y.appendChild(Z);
            X.appendChild(Y);
            document.getElementById(
                "tableID").appendChild(X);
        }
    </script>
</body>
 
</html>


Output:

Supported Browsers are listed below:

  • Chrome 1.0
  • Edge 12.0
  • Firefox 1.0
  • Internet Explorer 5.5
  • Opera 12.1
  • Safari 3.0


Last Updated : 22 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads