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

Probieren Sie es aus

<table>  <caption>    Council budget (in £) 2018  </caption>  <thead>    <tr>      <th scope="col">Items</th>      <th scope="col">Expenditure</th>    </tr>  </thead>  <tbody>    <tr>      <th scope="row">Donuts</th>      <td>3,000</td>    </tr>    <tr>      <th scope="row">Stationery</th>      <td>18,000</td>    </tr>  </tbody>  <tfoot>    <tr>      <th scope="row">Totals</th>      <td>21,000</td>    </tr>  </tfoot></table>

thead,tfoot {  background-color: #2c5e77;  color: white;}tbody {  background-color: #e4f0f5;}table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}caption {  caption-side: bottom;  padding: 10px;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}td {  text-align: center;}

Attribute

Dieses Element beinhaltet dieglobalen Attribute.

Veraltete Attribute

Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind unten dokumentiert, um beim Aktualisieren von bestehendem Code als Referenz und aus historischem Interesse zu dienen.

alignVeraltet

Gibt die horizontale Ausrichtung jeder Fußzelle an. Die möglichenaufgezählten Werte sindleft,center,right,justify undchar. Wenn unterstützt, richtet der Wertchar den Textinhalt an dem in demchar Attribut definierten Zeichen und dem durch dascharoff Attribut definierten Versatz aus. Verwenden Sie stattdessen dietext-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

bgcolorVeraltet

Definiert die Hintergrundfarbe jeder Fußzelle. Der Wert ist eine HTML-Farbe; entweder ein6-stelliger hexadezimaler RGB-Code, mit einem# vorangestellt, oder einFarb-Stichwort. Andere CSS<color> Werte werden nicht unterstützt. Verwenden Sie stattdessen diebackground-color CSS-Eigenschaft, da dieses Attribut veraltet ist.

charVeraltet

Macht nichts. Es war ursprünglich vorgesehen, die Ausrichtung des Inhalts an einem Zeichen jeder Fußzelle festzulegen. Typische Werte hierfür sind ein Punkt (.), wenn versucht wird, Zahlen oder Geldbeträge auszurichten. Wennalign nicht aufchar gesetzt ist, wird dieses Attribut ignoriert.

charoffVeraltet

Macht nichts. Es war ursprünglich vorgesehen, die Anzahl der Zeichen anzugeben, um den Inhalt der Fußzelle von dem durch daschar Attribut angegebenen Ausrichtungszeichen zu verschieben.

valignVeraltet

Gibt die vertikale Ausrichtung jeder Fußzelle an. Die möglichenaufgezählten Werte sindbaseline,bottom,middle undtop. Verwenden Sie stattdessen dievertical-align CSS-Eigenschaft, da dieses Attribut veraltet ist.

Nutzungshinweise

• Das<tfoot> wird nach jedem<caption>,<colgroup>,<thead>,<tbody>, und<tr> Element platziert.
• Zusammen mit seinen verwandten<thead> und<tbody> Elementen liefert das<tfoot> Element nützlichesemantische Informationen und kann sowohl bei der Anzeige am Bildschirm als auch beim Drucken verwendet werden. Die Spezifikation solcher Tabellengruppen liefert auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Bildschirmlesern und Suchmaschinen.
• Beim Drucken eines Dokuments, in der Situation einer mehrseitigen Tabelle, gibt der Tabellenfuß normalerweise Informationen an, die als Zwischensumme auf jeder Seite ausgegeben werden.

Beispiel

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

Tabelle mit Fußzeile

Dieses Beispiel zeigt eine Tabelle, die in einen Kopfteil mit Spaltenüberschriften, einen Hauptteil mit den Hauptdaten der Tabelle und einen Fußteil, der die Daten einer Spalte zusammenfasst, unterteilt ist.

HTML

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

Um die Zellen im Fuß den richtigen Spalten zuzuordnen, wird dascolspan Attribut auf dem<th> Element verwendet, um die Zeilenkopfzelle ü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, wobei der weggelassenecolspan Attributwert standardmäßig auf1 gesetzt wird. Zusätzlich wird dasscope Attribut aufrow in der Kopfzelle (<th>) im Fuß gesetzt, um explizit zu definieren, dass diese Fußkopfzelle sich auf die Tabellenzellen innerhalb derselben Zeile bezieht, die in unserem Beispiel die eine Datenzelle in der Fußzeile ist, die den berechneten Durchschnitt enthält.

<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

Einige grundlegende CSS wird verwendet, um den Tabellenfuß zu stylen und hervorzuheben, damit die Fußzellen sich von den Daten im Tabellenteil abheben.

tfoot {  border-top: 3px dotted rgb(160 160 160);  background-color: #2c5e77;  color: white;}tfoot th {  text-align: right;}tfoot td {  font-weight: bold;}thead {  border-bottom: 2px solid rgb(160 160 160);  background-color: #2c5e77;  color: white;}tbody {  background-color: #e4f0f5;}

table {  border-collapse: collapse;  border: 2px solid rgb(140 140 140);  font-family: sans-serif;  font-size: 0.8rem;  letter-spacing: 1px;}th,td {  border: 1px solid rgb(160 160 160);  padding: 8px 10px;}tr > td:last-of-type {  text-align: center;}

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Lernen: Grundlagen von HTML-Tabellen
• <caption>,<col>,<colgroup>,<table>,<tbody>,<td>,<th>,<thead>,<tr>: Andere tabellenbezogene Elemente
• background-color: CSS-Eigenschaft zum Festlegen der Hintergrundfarbe jeder Fußzelle
• border: CSS-Eigenschaft zur Steuerung der Ränder von Fußzellen
• text-align: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Fußzelle
• vertical-align: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Fußzelle