HTML <tfoot> Tag

Definition und Verwendung

<tfoot> Tag verwendet, um den Abschnitt der Fußzeilein einer HTML-Tabelle zu gruppieren.

<tfoot> Elemente werden mit <thead> und <tbody> Elemente kombiniert werden, um die einzelnen Teile der Tabelle (Fußzeile, Kopfzeile, Körper) zu spezifizieren.

Browser können diese Elemente verwenden, um bei derScrolling des Tabellenkörpers die Kopf- und Fußzeilen unabhängig anzuzeigen. Darüber hinaus können diese Elemente verwendet werden, um bei der Druckausgabe großer Tabellen, die über mehrere Seiten hinausgehen, die Kopf- und Fußzeilen auf dem oberen und unteren Rand jeder Seite auszudrucken.

Hinweis: Das <tfoot>-Element muss eine oder mehrere <tr> Tag.

<tfoot> Tag muss im folgenden Kontext verwendet werden: als <table> Kinder des Elements, in jeder <caption>,<colgroup>,<thead> und <tbody> nach dem Element.

Tipp:Standardmäßig beeinflussen <thead>, <tbody> und <tfoot> Elemente beeinflussen die Tabellenlayout nicht. Sie können jedoch mit CSS die Stile dieser Elemente festlegen (siehe untenstehende Beispiele)!

Beispiel

Beispiel 1

HTML-Tabelle, die <thead>, <tbody> und <tfoot> enthält:

<table>
  <thead>
    <tr>
      <th>Monat</th>
      <th>Sparguthaben</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januar</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Summe</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Versuchen Sie es selbst

Beispiel 2

CSS-Stile für <thead>, <tbody> und <tfoot> einstellen:

<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>Monat</th>
      <th>Sparguthaben</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Januar</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Februar</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Summe</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Versuchen Sie es selbst

Beispiel 3

Wie wird Ausrichtung erreicht? <tfoot> Inhalt (CSS verwendet):

<table style="width:100%">
  <tr>
    <th>Monat</th>
    <th>Sparguthaben</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="text-align:center">
    <tr>
      <td>Summe</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Versuchen Sie es selbst

Beispiel 4

Wie wird vertikale Ausrichtung erreicht? <tfoot> Inhalt (CSS verwendet):

<table style="width:100%">
  <tr>
    <th>Monat</th>
    <th>Sparguthaben</th>
  </tr>
  <tr>
    <td>Januar</td>
    <td>￥3400</td>
  </tr>
  <tr>
    <td>Februar</td>
    <td>￥4500</td>
  </tr>
  <tfoot style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Summe</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Versuchen Sie es selbst

Globale Attribute

<tfoot> Der Tag unterstützt auch Globale Attribute in HTML.

Ereignisattribute

<tfoot> Der Tag unterstützt auch Ereignisattribute in HTML.

Standardmäßige CSS-Einstellungen

Die meisten Browser zeigen die folgenden Standardwerte an <tfoot> Element:

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

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung