Add a Footer with tfoot element

Description

The tfoot element marks the table footer.

The tfoot element can appear before or after the tbody or tr elements.

The align, char, charoff, and valign attributes are obsolete.

Prior to HTML5, the tfoot element had to appear before the tbody element.

In HTML5, you can put the tfooter element after the tbody or the last tr element.

Example

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


<!DOCTYPE HTML>
<html>
<head>
<style>
thead th, tfoot th {<!-- ww  w  .j  a v  a2 s.  com-->
  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>Color</th>
        <th>Size</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Rank Footer</th>
        <th>Name Footer</th>
        <th>Color Footer</th>
        <th>Size Footer</th>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <th>Favorite:</th>
        <td>XML</td>
        <td>HTML</td>
        <td>CSS</td>
      </tr>
      <tr>
        <th>2nd Favorite:</th>
        <td>Java</td>
        <td>Javacript</td>
        <td>Oracle</td>
      </tr>
      <tr>
        <th>3rd Favorite:</th>
        <td>Json</td>
        <td>Text</td>
        <td>CSV</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Click to view the demo





















Home »
  HTML CSS »
    HTML »




HTML Introduction
HTML Document
HTML Section
HTML Group Content
HTML Text Marker
HTML Table
HTML Form
HTML Embed