HTML - tags - tfoot tag

revision:


Content

"tfoot" tag : groups footer content of a table syntax some examples


"tfoot" tag : groups footer content of a table

top

The <tfoot> tag is used to >group footer content in an HTML table. The <foot> element is used in conjunction with the <thead> and <tbody> elements to specify each part of a table (footer, header, body).Browsers can use these elements to enable scrolling of the table body independently of the header and footer. Also, when printing a large table that spans multiple pages, these elements can enable the table header and footer to be printed at the top and bottom of each page.

The <tfoot> element must have one or more "tr" tags inside. It must be used as a child of a "table" element, after any "caption", "colgroup", "thead", and "tbody" elements. The "thead", "tbody", and "tfoot" elements will not affect the layout of the table by default. However, you can use CSS to style these elements!

Attributes: the <tfoot> element supports the global attributes and events attributes.


Syntax

top

<tfoot> . . . </tfoot>


some examples

top
Month Savings
January $100
January $80
Sum $180
Codes:
                  <style>
                      table, th, td {border: 1px solid black;margin-left:4vw;}
                  </style>
                
                  <table>
                      <thead>
                        <tr>
                          <th>Month</th>
                          <th>Savings</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>January</td>
                          <td>$100</td>
                        </tr>
                        <tr>
                          <td>January</td>
                          <td>$80</td>
                        </tr>
                      </tbody>
                      <tfoot>
                        <tr>
                          <td>Sum</td>
                          <td>$180</td>
                        </tr>
                      </tfoot>
                    </table>
              
Month Savings
January $100
January $80
Sum $180
Codes:
                  <table style="width:50%">
                      <tr>
                        <th>Month</th>
                        <th>Savings</th>
                      </tr>
                      <tr>
                        <td>January</td>
                        <td>$100</td>
                      </tr>
                      <tr>
                        <td>January</td>
                        <td>$80</td>
                      </tr>
                      <tfoot style="vertical-align:bottom">
                        <tr style="height:100px">
                          <td>Sum</td>
                          <td>$180</td>
                        </tr>
                      </tfoot>  
                    </table>