HTML <tfoot> etikett

Definition och användning

<tfoot> etikett för att gruppera innehållet i tabellens fot.

<tfoot> elementet används tillsammans med <thead> och <tbody> elementen tillsammans för att specificera varje del av tabellen (fot, rubrik, kropp).

webbläsare kan använda dessa element för att visa rubriker och fötter oberoende när innehållet i tabellens kropp rullas. Dessutom kan dessa element användas för att skriva ut rubriker och fötter på toppen och botten av varje sida när stora tabeller med flera sidor skrivs ut.

Observera: <tfoot>-elementet måste innehålla en eller flera <tr> etikett.

<tfoot> etikett måste användas i följande kontext: som en <table> en undercomponent av <caption>och<colgroup>och<thead> och <tbody> element efter.

Tips:Som standard påverkar <thead>, <tbody> och <tfoot> Elementen påverkar inte tabellens layout. Men du kan använda CSS för att ställa in stilen för dessa element (se exempel nedan)!

Exempel

Exempel 1

HTML-tabell som innehåller <thead>, <tbody> och <tfoot>-element:

<table>
  <thead>
    <tr>
      <th>Månad</th>
      <th>Sparande</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sammanfattning</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova själv

Exempel 2

Använd CSS för att ställa in stilen för <thead>, <tbody> och <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>Månad</th>
      <th>Sparande</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januari</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februari</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sammanfattning</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova själv

Exempel 3

Hur man justerar <tfoot> innehållet (använd CSS):

<table style="width:100%">
  <tr>
    <th>Månad</th>
    <th>Sparande</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Sammanfattning</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova själv

Exempel 4

Hur man vertikalt justerar <tfoot> innehållet (använd CSS):

<table style="width:100%">
  <tr>
    <th>Månad</th>
    <th>Sparande</th>
  </tr>
  <tr>
    <td>Januari</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februari</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Sammanfattning</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Prova själv

Globala egenskaper

<tfoot> Etiketterna stöder också Globala egenskaper i HTML.

händelseegenskaper

<tfoot> Etiketterna stöder också Händelseegenskaper i HTML.

Standard CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för att visa <tfoot> Element:

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

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd