<tfoot>: Das Table-Fuß-Element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Das <tfoot>-Element in HTML kapselt eine Gruppe von Tabellenreihen (<tr>-Elemente) ein und zeigt an, dass sie den Fuß einer Tabelle mit Informationen über die Spalten der Tabelle darstellen. Dies ist üblicherweise eine Zusammenfassung der Spalten, z.B. eine Summe der in einer Spalte angegebenen Zahlen.

Probieren Sie es aus

Attribute

Dieses Element beinhaltet die globalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten zur Referenz beim Aktualisieren bestehenden Codes und aus historischem Interesse dokumentiert.

align Veraltet

Legt die horizontale Ausrichtung jeder Fußzelle fest. Die möglichen aufgezählten Werte sind left, center, right, justify und char. Wenn unterstützt, richtet der char-Wert den Textinhalt an dem im char-Attribut definierten Zeichen und an dem im charoff-Attribut definierten Offset aus. Verwenden Sie stattdessen die text-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

bgcolor Veraltet

Definiert die Hintergrundfarbe jeder Fußzelle. Der Wert ist eine HTML-Farbe, entweder ein 6-stelliges hexadezimales RGB-Kürzel, das mit einem # beginnt, oder ein Farbbegriff. Andere CSS-<color>-Werte werden nicht unterstützt. Verwenden Sie stattdessen die background-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

char Veraltet

Hat keine Funktion. Es war ursprünglich gedacht, die Ausrichtung des Inhalts an einem Zeichen in jeder Fußzelle zu spezifizieren. Typische Werte hierfür sind ein Punkt (.) bei dem Versuch, Zahlen oder Geldbeträge auszurichten. Wenn align nicht auf char gesetzt ist, wird dieses Attribut ignoriert.

charoff Veraltet

Hat keine Funktion. Es war ursprünglich gedacht, die Anzahl der Zeichen anzugeben, um die der Fußzelleninhalt von dem durch das char-Attribut angegebenen Ausrichtungszeichen versetzt werden soll.

valign Veraltet

Legt die vertikale Ausrichtung jeder Fußzelle fest. Die möglichen aufgezählten Werte sind baseline, bottom, middle und top. Verwenden Sie stattdessen die vertical-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

Nutzungshinweise

  • Das <tfoot> wird nach allen <caption>, <colgroup>, <thead>, <tbody> und <tr>-Elementen platziert.
  • Zusammen mit seinen verwandten <thead>- und <tbody>-Elementen bietet das <tfoot>-Element nützliche semantische Informationen und kann sowohl beim Rendern für den Bildschirm als auch beim Drucken verwendet werden. Die Angabe solcher Inhaltsgruppen in Tabellen bietet auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmlesegeräte und Suchmaschinen.
  • Beim Drucken eines Dokuments gibt der Tabellenfuß in einer mehrseitigen Tabelle normalerweise Informationen an, die als Zwischenzusammenfassung auf jeder Seite ausgegeben werden.

Beispiel

Siehe <table> für ein vollständiges Tabellenbeispiel mit gängigen Standards und bewährten Praktiken.

Tabelle mit Fußzeile

Dieses Beispiel zeigt eine Tabelle, die in einen Kopfbereich mit Spaltenüberschriften, einen Hauptdatenbereich und einen Fußbereich unterteilt ist, der die Daten einer Spalte zusammenfasst.

HTML

Die <thead>, <tbody> und <tfoot>-Elemente werden verwendet, um eine grundlegende Tabelle in semantische Abschnitte zu strukturieren. Das <tfoot>-Element repräsentiert den Fußbereich der Tabelle, der eine Zeile (<tr>) enthält, die den berechneten Durchschnitt der Werte in der "Credits"-Spalte darstellt.

Um die Zellen im Fuß den richtigen Spalten zuzuordnen, wird das colspan-Attribut am <th>-Element verwendet, um die Kopfzellenzeile über die ersten drei Tabellenspalten zu spannen. Die einzelne Datenzelle (<td>) im Fuß wird automatisch an der richtigen Stelle platziert, d.h. in der vierten Spalte, mit dem weggelassenen colspan-Attributswert, der standardmäßig auf 1 gesetzt ist. Zusätzlich wird das scope-Attribut auf row am Kopfzellen-Element (<th>) im Fuß gesetzt, um explizit zu definieren, dass sich diese Fußkopfzelle auf die Tabellenzellen innerhalb derselben Zeile bezieht, welche in unserem Beispiel die eine Datenzelle in der Fußzeile ist, die den berechneten Durchschnitt enthält.

html
<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3" scope="row">Average Credits</th>
      <td>240</td>
    </tr>
  </tfoot>
</table>

CSS

Einfaches CSS wird verwendet, um den Tabellenfuß hervorzuheben, sodass sich die Fußzellen von den Daten im Tabellenkörper abheben.

css
tfoot {
  border-top: 3px dotted rgb(160 160 160);
  background-color: #2c5e77;
  color: #fff;
}

tfoot th {
  text-align: right;
}

tfoot td {
  font-weight: bold;
}

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: #fff;
}

tbody {
  background-color: #e4f0f5;
}

Ergebnis

Technische Zusammenfassung

Inhaltskategorien Keine.
Erlaubte Inhalte Null oder mehr <tr>-Elemente.
Tag-Auslassung Der Start-Tag ist obligatorisch. Der End-Tag kann weggelassen werden, wenn sich kein weiterer Inhalt im übergeordneten <table>-Element befindet.
Erlaubte Eltern Ein <table>-Element. Das <tfoot> muss nach allen <caption>, <colgroup>, <thead>, <tbody>, und <tr> Elementen erscheinen. Beachten Sie, dass dies die Anforderung in HTML ist.
Ursprünglich, in HTML4, war das Gegenteil der Fall: Das <tfoot>-Element durfte nicht nach irgendeinem <tbody> und <tr> Element platziert werden.
Implizierte ARIA-Rolle rowgroup
Erlaubte ARIA-Rollen Beliebig
DOM-Schnittstelle [`HTMLTableSectionElement`](/de/docs/Web/API/HTMLTableSectionElement)

Spezifikationen

Specification
HTML Standard
# the-tfoot-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch