HTML <tfoot> Tag
Das <tfoot>-Tag definiert die Fußzeile einer Tabelle. Wird zusammen mit <thead> und <tbody> verwendet. Beispiele ansehen.
Das <tfoot> Tag definiert die Fußzeile einer HTML-Tabelle. Es wird zusammen mit den Elementen <thead> und <tbody> verwendet, die die Kopf- und Datenzeilen der Tabelle jeweils gruppieren.
Die Fußzeile ist der geeignete Ort für Spaltensummen, Gesamtwerte, Durchschnitte oder andere Zusammenfassungszeilen, die die Daten im Tabellenkörper aggregieren. Wenn diese Zeilen mit <tfoot> statt mit einem einfachen <tr> gruppiert werden, erhält die Tabelle eine klare semantische Struktur, die assistiven Technologien dabei hilft, die Tabelle für Screenreader-Nutzer zu beschreiben.
Warum <tfoot> verwenden?
- Semantik und Zusammenfassungen. Die Fußzeile signalisiert „Diese Zeilen fassen die Tabelle zusammen" — Gesamtwerte, Zwischensummen, Anzahlen oder Anmerkungen. Häufig überspannt ein einzelnes
<th>oder<td>die gesamte Breite mitcolspan. - Druck- und Scroll-Verhalten. Wenn eine lange Tabelle über mehrere Seiten gedruckt wird, wiederholen manche Browser
<thead><tfoot>overflow), kann die Fußzeile am unteren Rand fixiert bleiben. - Barrierefreiheit. Explizite Kopf-, Daten- und Fußzeilengruppen geben Screenreadern eine aussagekräftigere Struktur als eine flache Liste von Zeilen.
Wo steht <tfoot> ?
Das <tfoot> Tag muss innerhalb des <table>-Elements deklariert werden, nach den Elementen <caption> und <colgroup> (falls vorhanden).
In HTML5 darf <tfoot> im Quellcode vor oder nach <tbody> stehen. Die alte HTML4-Regel, die verlangte, dass <tfoot> vor <tbody> kommen muss, ist veraltet. In jedem Fall rendert der Browser die Fußzeile immer am unteren Ende der Tabelle, sodass die Platzierung danach (direkt nach dem Tabellenkörper) die lesbarste Wahl ist.
Das <tfoot> Tag muss mindestens ein <tr>-Tag enthalten.
Die Elemente <thead> , <tbody> und <tfoot> beeinflussen das Layout der Tabelle standardmäßig nicht. Verwenden Sie CSS-Eigenschaften, um das Aussehen der Tabelle anzupassen.
Syntax
Das <tfoot> Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden ( <tfoot> ) und dem schließenden ( </tfoot> ) Tag geschrieben.
HTML <tfoot> Tag
<table>
<thead> ... </thead>
<tbody> ... </tbody>
<tfoot>
<tr>
<td> ... </td>
</tr>
</tfoot>
</table>Beispiel mit einer Summenzeile
Dieses Beispiel verwendet <thead> , <tbody> und <tfoot> gemeinsam. Die Fußzeile enthält eine Zusammenfassungszeile, die die Werte des Tabellenkörpers addiert:
<!DOCTYPE html>
<html>
<head>
<title>tfoot totals row</title>
<style>
table { width: 360px; border-collapse: collapse; }
th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
tfoot td { font-weight: bold; background-color: #f2f2f2; }
</style>
</head>
<body>
<table>
<caption>Monthly Sales</caption>
<thead>
<tr>
<th>Product</th>
<th>Units</th>
</tr>
</thead>
<tbody>
<tr>
<td>Keyboards</td>
<td>40</td>
</tr>
<tr>
<td>Mice</td>
<td>35</td>
</tr>
<tr>
<td>Monitors</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>100</td>
</tr>
</tfoot>
</table>
</body>
</html>Beachten Sie, dass <tfoot> im Quellcode nach <tbody> steht, die Fußzeile aber trotzdem am unteren Ende gerendert wird — genau dort, wo man sie liest.
Strukturierung komplexer Tabellen
Verwenden Sie die Elemente <thead> , <tbody> und <tfoot> , um Tabellen mit großen oder komplexen Datensätzen zu organisieren. Sie erleichtern das Lesen des Quellcodes, ermöglichen das unabhängige Stylen jedes Abschnitts und verbessern die Barrierefreiheit. Um unabhängiges Scrollen des Tabellenkörpers bei sichtbar bleibendem Kopf- und Fußbereich zu ermöglichen, wenden Sie CSS overflow-Eigenschaften auf <tbody> an.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | right, left, center, justify, char | Legt die horizontale Ausrichtung des Inhalts innerhalb des <tfoot> Elements fest. Dieses Attribut wird von HTML5 nicht unterstützt. |
| bgcolor | bgcolor | Legt die Hintergrundfarbe der Zeilen innerhalb des <tfoot> Elements fest. Dieses Attribut wird von HTML5 nicht unterstützt. |
| char | character | Gibt die Ausrichtung des Inhalts innerhalb des <tfoot> Elements an einem Zeichen an. Wird nur verwendet, wenn das Attribut align="char" gesetzt ist. Dieses Attribut wird von HTML5 nicht unterstützt. |
| charoff | number | Gibt die Anzahl der Zeichen an, um die der Inhalt innerhalb des <tfoot> Elements vom durch das char-Attribut angegebenen Zeichen versetzt wird. Wird nur verwendet, wenn das Attribut align="char" gesetzt ist. Dieses Attribut wird von HTML5 nicht unterstützt. |
| valign | top, bottom, middle, baseline | Legt die vertikale Ausrichtung des Inhalts innerhalb des <tfoot> Elements fest. Dieses Attribut wird von HTML5 nicht unterstützt. |
Hinweis: Alle oben aufgeführten Attribute sind in HTML5 veraltet. Verwenden Sie stattdessen CSS. Die folgende Tabelle zeigt den modernen Ersatz für jedes Attribut:
| Veraltetes Attribut | CSS-Ersatz |
|---|---|
align | text-align |
valign | vertical-align |
bgcolor | background-color |
Das <tfoot> Tag unterstützt außerdem die globalen Attribute und die Ereignis-Attribute.
So gestalten Sie ein HTML <tfoot> Tag mit CSS
tfoot {
background-color: #f2f2f2; /* replaces bgcolor */
font-weight: bold;
text-align: right; /* replaces align */
vertical-align: middle; /* replaces valign */
}Weitere Möglichkeiten zur Gestaltung von Tabellenabschnitten finden Sie im Kapitel CSS Tables.