HTML <tfoot> - taulukon jalka

Definition and Usage

<tfoot> tag is used to group the footer content in an HTML table.

<tfoot> The element with <thead> and <tbody> Elements combined to specify each part of the table (footer, header, body).

Browsers can use these elements to make the header and footer visible independently when scrolling through the table body. Moreover, when printing large tables that span multiple pages, these elements can ensure that the header and footer are printed at the top and bottom of each page.

Note: The <tfoot> element must contain one or more <tr> tag.

<tfoot> The tag must be used in the following context: as a <table> The child elements of the element, in any <caption>,<colgroup>,<thead> and <tbody> after the element.

Tip:By default, <thead>, <tbody>, and <tfoot> Elements do not affect the table layout. However, you can use CSS to set the styles of these elements (see the examples below)!

Instance

Example 1

HTML table containing <thead>, <tbody>, and <tfoot> elements:

<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>helmikuu</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Yhteensä</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Kokeile itse

Example 2

Use CSS to set the styles of <thead>, <tbody>, and <tfoot>:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>helmikuu</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Yhteensä</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Kokeile itse

Example 3

How to align <tfoot> Content within (using CSS):

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Yhteensä</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Kokeile itse

Example 4

How to align vertically <tfoot> Content within (using CSS):

<table style="width:100%">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>helmikuu</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Yhteensä</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Kokeile itse

Globaalit attribuutit

<tfoot> Tämä merkki tukee myös HTML-globaalit attribuutit.

tapahtumamäärittelyjä

<tfoot> Tämä merkki tukee myös HTML-tapahtumamäärittely.

Oletusarvoiset CSS-asetukset

Useimmat selaimet näyttävät seuraavat oletusarvot <tfoot> Elementti:

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

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki