<tfoot>: Das Table Foot 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>
HTML-Element kapselt eine Gruppe von Tabellenzeilen (<tr>
-Elemente) ein und weist darauf hin, dass sie den Fuß einer Tabelle bilden, mit Informationen über die Spalten der Tabelle. Dies ist gewöhnlich eine Zusammenfassung der Spalten, z.B. eine Summe der in einer Spalte angegebenen Zahlen.
Probieren Sie es aus
Attribute
Dieses Element enthält die globalen Attribute.
Veraltete Attribute
Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier dokumentiert, um vorhandenen Code zu aktualisieren und aus historischem Interesse.
align
Veraltet-
Gibt die horizontale Ausrichtung jeder Fußzelle an. Die möglichen aufgezählten Werte sind
left
,center
,right
,justify
undchar
. Wenn unterstützt, richtet der Wertchar
den Textinhalt an dem Zeichen aus, das imchar
-Attribut definiert ist, sowie an einem imcharoff
-Attribut definierten Versatz. Verwenden Sie stattdessen dietext-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-stelliger hexadezimaler RGB-Code, vorangestellt von einem
#
, oder ein Farbschlüsselwort. Andere CSS<color>
Werte werden nicht unterstützt. Verwenden Sie stattdessen diebackground-color
CSS-Eigenschaft, da dieses Attribut veraltet ist. char
Veraltet-
Hat keine Funktion. Ursprünglich gedacht, um die Ausrichtung des Inhalts an einem Zeichen jeder Fußzelle anzugeben. Typische Werte hierfür beinhalten einen Punkt (
.
), wenn versucht wird, Zahlen oder Geldwerte auszurichten. Wennalign
nicht aufchar
gesetzt ist, wird dieses Attribut ignoriert. charoff
Veraltet-
Hat keine Funktion. Ursprünglich gedacht, die Anzahl der Zeichen anzugeben, um den Inhalt der Fußzelle von dem im
char
-Attribut angegebenen Ausrichtungszeichen zu versetzen. valign
Veraltet-
Gibt die vertikale Ausrichtung jeder Fußzelle an. Die möglichen aufgezählten Werte sind
baseline
,bottom
,middle
undtop
. Verwenden Sie stattdessen dievertical-align
CSS-Eigenschaft, da dieses Attribut veraltet ist.
Verwendungshinweise
- 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 Bildschirm als auch für Druck verwendet werden. Das Spezifizieren solcher Tabellengruppen liefert auch wertvolle kontextbezogene Informationen für unterstützende Technologien wie Screenreader und Suchmaschinen. - Beim Drucken eines Dokuments wird im Fall einer mehrseitigen Tabelle der Tabellenfuß normalerweise als Zwischensumme auf jeder Seite ausgegeben.
Beispiel
Siehe <table>
für ein vollständiges Tabellenbeispiel, das gängige Standards und Best Practices einführt.
Tabelle mit Fußzeile
Dieses Beispiel zeigt eine Tabelle, die in einen Kopfbereich mit Spaltenüberschriften, einen Hauptbereich mit den Hauptdaten der Tabelle und eine Fußzeile unterteilt ist, die 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 auf dem <th>
Element verwendet, um die Kopfzeile ü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 ausgelassene colspan
Attributwert standardmäßig auf 1
gesetzt ist. Zusätzlich wird das scope
Attribut auf row
auf der Kopfzelle (<th>
) im Fuß gesetzt, um explizit zu definieren, dass diese Fußkopfzeile sich auf die Tabellenzellen in derselben Zeile bezieht, die in unserem Beispiel die einzige 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 werden verwendet, um den Tabellenfuß zu gestalten und hervorzuheben, sodass sich die Fußzellen von den Daten im Tabellenkörper abheben.
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. |
---|---|
Zulässiger Inhalt | Null oder mehr <tr> Elemente. |
Tag-Auslassung | Das Start-Tag ist obligatorisch. Das End-Tag kann weggelassen werden, wenn es keinen weiteren Inhalt im übergeordneten <table> Element gibt. |
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 konnte nicht nach einem
<tbody> und <tr>
Element platziert werden.
|
Implizierte ARIA-Rolle | rowgroup |
Zulässige ARIA-Rollen | Jede |
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
- Lernen: HTML Tabellen
<caption>
,<col>
,<colgroup>
,<table>
,<tbody>
,<td>
,<th>
,<thead>
,<tr>
: Andere tabellenbezogene Elementebackground-color
: CSS-Eigenschaft, um die Hintergrundfarbe jeder Fußzelle festzulegenborder
: CSS-Eigenschaft, um die Ränder der Fußzellen zu steuerntext-align
: CSS-Eigenschaft, um den Inhalt jeder Fußzelle horizontal auszurichtenvertical-align
: CSS-Eigenschaft, um den Inhalt jeder Fußzelle vertikal auszurichten