<tfoot>: Das Tabellenfuß-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.
* Some parts of this feature may have varying levels of support.
Das <tfoot>
HTML Element kapselt eine Menge von Tabellenzeilen (<tr>
Elemente) ein und zeigt an, dass diese den Fuß einer Tabelle mit Informationen zu den Spalten der Tabelle bilden. In der Regel handelt es sich dabei um eine Zusammenfassung der Spalten, z. B. eine Summe der in einer Spalte angegebenen Zahlen.
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: #fff;
}
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 enthält die globalen Attribute.
Veraltete Attribute
Die folgenden Attribute sind veraltet und sollten nicht verwendet werden. Sie sind hier dokumentiert, um beim Aktualisieren von bestehendem Code als Referenz zu dienen und aus historischen Gründen.
align
Veraltet-
Gibt die horizontale Ausrichtung jeder Fußzelle an. Die möglichen Aufzählungswerte sind
left
,center
,right
,justify
undchar
. Bei Unterstützung richtet der Wertchar
den Textinhalt am imchar
-Attribut definierten Zeichen und am durch dascharoff
-Attribut definierten Offset aus. 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, der mit einem
#
beginnt, oder ein Farbstichwort. 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. Es war ursprünglich vorgesehen, die Ausrichtung des Inhalts an einem Zeichen jeder Fußzelle zu spezifizieren. Typische Werte dafür sind ein Punkt (
.
) beim Versuch, Zahlen oder Geldwerte auszurichten. Wennalign
nicht aufchar
gesetzt ist, wird dieses Attribut ignoriert. charoff
Veraltet-
Hat keine Funktion. Es war ursprünglich vorgesehen, die Anzahl der Zeichen anzugeben, um die der Fußzelleninhalt von dem durch das
char
-Attribut angegebenen Ausrichtungszeichen versetzt werden soll. valign
Veraltet-
Gibt die vertikale Ausrichtung jeder Fußzelle an. Die möglichen Aufzählungswerte 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 den zugehörigen
<thead>
und<tbody>
Elementen bietet das<tfoot>
Element nützliche semantische Informationen und kann sowohl beim Rendering für Bildschirm als auch für Druck verwendet werden. Die Spezifikation solcher Tabellengruppen liefert auch wertvolle kontextuelle Informationen für unterstützende Technologien, einschließlich Screenreader und Suchmaschinen. - Beim Drucken eines Dokuments gibt der Tabellenfuß in der Regel Informationen an, die als Zwischensumme auf jeder Seite einer mehrseitigen Tabelle ausgegeben werden.
Beispiel
Siehe <table>
für ein vollständiges Tabellenbeispiel, das allgemeine Standards und bewährte Praktiken einführt.
Tabelle mit Fußzeile
Dieses Beispiel zeigt eine Tabelle, die in einen Kopfbereich mit Spaltenüberschriften, einen Hauptdatenbereich und einen Fußbereich zur Zusammenfassung der Daten einer Spalte unterteilt ist.
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 zuzuweisen, wird das colspan
Attribut auf dem <th>
Element verwendet, um die Kopfzelle über die ersten drei Tabellenspalten zu spannen. Die einzelne Datenzelle (<td>
) im Fuß wird automatisch an die richtige Stelle platziert, d.h. in die vierte Spalte, wobei der unterlassene colspan
Attributwert standardmäßig auf 1
gesetzt wird. Zusätzlich wird das scope
Attribut auf row
auf der Kopfzelle (<th>
) im Fuß gesetzt, um explizit anzugeben, dass sich diese Fußkopfzelle auf die Tabellenzellen innerhalb derselben Zeile bezieht, die in unserem Beispiel die eine Datenzelle im Fußbereich 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 stylen 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. |
---|---|
Erlaubter Inhalt | Null oder mehr <tr> Elemente. |
Tag-Auslassung |
Der Start-Tag ist obligatorisch. Der End-Tag kann weggelassen werden, wenn kein weiterer Inhalt im übergeordneten <table> Element mehr vorhanden ist.
|
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 war in HTML4 das Gegenteil der Fall: das <tfoot> Element durfte nicht nach allen
<tbody> und <tr>
Elementen platziert werden.
|
Implizierte ARIA-Rolle |
rowgroup
|
Erlaubte ARIA-Rollen | Beliebig |
DOM-Schnittstelle | [`HTMLTableSectionElement`](/de/docs/Web/API/HTMLTableSectionElement) |
Spezifikationen
Specification |
---|
HTML # the-tfoot-element |
Browser-Kompatibilität
Siehe auch
- Lernen: Grundlagen von HTML-Tabellen
<caption>
,<col>
,<colgroup>
,<table>
,<tbody>
,<td>
,<th>
,<thead>
,<tr>
: Andere tabellenbezogene Elementebackground-color
: CSS-Eigenschaft zum Festlegen der Hintergrundfarbe jeder Fußzelleborder
: CSS-Eigenschaft zur Steuerung der Rahmen von Fußzellentext-align
: CSS-Eigenschaft zur horizontalen Ausrichtung des Inhalts jeder Fußzellevertical-align
: CSS-Eigenschaft zur vertikalen Ausrichtung des Inhalts jeder Fußzelle