HTML<tfoot tag

HTML <tfoot> tag is used to define the set of rows which represents footer of an HTML table. The <tfoot> tag must contain one or more <tr> element.

The <tfoot> tag is used as a child element of HTML table (<table>) along with <thead> and <tbody> elements, where <thead> defines table header and <tbody> defines the table body.

Tips: The <thead>, <tbody>, and <tfoot> elements do not affect the table layout, and if you want to apply the change in table layout then use CSS properties.

Syntax

 

<tfoot>  

<tr></tr>  

<tr></tr>  

lt;/tfoot>

Following are some specifications about the HTML <tfoot> tag

DisplayNone
Start tag/End tagStart and End tag
UsageHTML Tables

Example

 

<!DOCTYPE html>  

<html>  

   <head>  

    <title>HTML tfoot Tag</title>  

    <style>  

         table{  

            border-collapse: collapse;  

            }  

        thead,tfoot{  

            background-color:#3f87a6;  

            }  

        tbody{  

           background-color:#97ffff;  

            }  

    </style>  

   </head>  

<body>  

  <h1>Example of tfoot tag</h1>  

  <table border="1" >  

              <thead>  

        <tr>  

              <th>Items</th>  

              <th>Quantity</th>  

              <th>Expenditure</th>    

        </tr>  

    </thead>  

      <tfoot>  

        <tr>  

          <th>Total</th>  

          <th>90</th>  

          <th>4175</th>  

        </tr>  

               </tfoot>  

                  <tbody>  

         <tr>  

             <td>Books</td>  

              <td>5</td>  

               <td>1500</td>  

         </tr>  

          <tr>  

                <td>Drawing-Paper</td>  

                  <td>50</td>  

                <td>800</td>  

         </tr>  

         <tr>  

            <td>Marker</td>  

            <td>35</td>  

             <td>1875</td>  

         </tr>  

     </tbody>  

 </table>  

</body>  

</html>

Output:

HTML tfoot tag

Attribute:

Tag-specific attributes:

AttributeValueDescription
alignright
left
center
justify
char
It determines the alignment of the content inside the <tfoot> element. (Not Supported in HTML5)
charCharacterIt specifies the alignment of the content inside the <tfoot> element to the character. (Not Supported in HTML5)
charoffNumberIt specifies the number of characters the content will be aligned from the character specified by the char attribute. (Not Supported in HTML5)
valigntop
middle
bottom
baseline
It determines the vertical alignment of the content inside the <tfoot> element. (Not Supported in HTML5)

Global attribute:

The <tfoot> tag supports the Global attributes in HTML.

Event attribute:

The <tfoot> tag supports the Event attributes in HTML.

Supporting Browsers

Elementchrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<tfoot>YesYesYesYesYes

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *