<tfoot> - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:tfoot

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. tfoot

Introduction

The tfoot element marks the footer rows for the table.

The tfoot Element summary

Item Value
Element: tfoot
Permitted Parents: The table element
Local Attributes: None
Contents: Zero or more tr elements
Tag Style: Start and end tags
New in HTML5? No
Changes in HTML5 The align, char, charoff, and valign attributes are obsolete.

Style Convention 

tfoot {
   display: table-footer-group;
   vertical-align: middle;
   border-color: inherit;
}

The following code shows how the tfoot element can be used to create a footer for a table element.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
      <style>
thead th, tfoot th { text-align:left; background:grey; color:white}
tbody th { text-align:right; background: lightgrey; color:grey}

      </style> 
   </head> 
   <body> 
      <table> 
         <thead> 
            <tr> 
               <th>Rank</th>
               <th>Name</th>
               <th>Level</th>
               <th>Size</th> 
            </tr> 
         </thead> 
         <tfoot> 
            <tr> 
               <th>Rank</th>
               <th>Name</th>
               <th>Level</th>
               <th>Size</th> 
            </tr> 
         </tfoot> 
         <tbody> 
            <tr> 
               <th>Favorite:</th> 
               <td>CSS</td> 
               <td>HTML</td> 
               <td>SQL</td> 
            </tr> 
            <tr> 
               <th>2nd Favorite:</th> 
               <td>Java</td> 
               <td>C</td> 
               <td>C++</td> 
            </tr> 
            <tr> 
               <th>3rd Favorite:</th> 
               <td>Javascript</td> 
               <td>Python</td> 
               <td>Ruby</td> 
            </tr> 
         </tbody> 
      </table>  
   </body><!--from   ww  w.  j  a  v  a 2 s .c om-->
</html>

Related Tutorials