HTML-Tag `<tfoot>`
The <tfoot> tag defines the footer of the table. Is used together with the <thead> and <tbody> elements. See examples.
Das `<tfoot>`-Tag definiert die Fußzeile einer HTML-Tabelle. Es wird zusammen mit den Elementen <thead> und <tbody> verwendet, die jeweils den Kopf und den Körper der Tabelle definieren.
Das `<tfoot>`-Tag muss innerhalb des Elements <table> deklariert werden, nach den Elementen <caption> und <colgroup> (falls vorhanden). Beachten Sie, dass `<tfoot>` im Quellcode vor `<tbody>` platziert werden muss, obwohl Browser es immer am unteren Rand der Tabelle darstellen.
danger
Das
`<tfoot>`-Tag muss mindestens ein <tr>-Tag enthalten.
success
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 kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (`<tfoot>`) und dem schließenden (`</tfoot>`) Tag geschrieben.
HTML `<tfoot>`-Tag
<table>
<thead> ... </thead>
<tfoot>
<tr>
<td> ... </td>
</tr>
</tfoot>
<tbody> ... </tbody>
</table>Beispiel für das HTML-`<tfoot>`-Tag:
HTML `<tfoot>`-Tag
<!DOCTYPE html>
<html>
<head>
<title>The title of the document.</title>
</head>
<body>
<table style="width: 400px; border-collapse: collapse;" border="1">
<caption>
FIFA World Cup 2018 Top Goalscorers
<hr />
</caption>
<thead>
<tr>
<th>Name</th>
<th>Country</th>
<th>Goal</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">Harry Kane - the best player!</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Harry Kane</td>
<td>England</td>
<td>6</td>
</tr>
<tr>
<td>Christiano Ronaldo</td>
<td>Portugal</td>
<td>4</td>
</tr>
<tr>
<td>Neymar</td>
<td>Brazil</td>
<td>2</td>
</tr>
</tbody>
</table>
</body>
</html><!-- Note: The border attribute is deprecated in HTML5. Use CSS for styling. -->
Ergebnis
Das `<tfoot>`- und andere Tags zum Zusammenfassen von Tabelleninhalten
Das Element `<tfoot>` definiert einen Fußbereich für die Tabelle, der typischerweise Zusammenfassungs- oder Aggregatdaten enthält. Im Quellcode muss es vor dem Element `<tbody>` erscheinen, aber Browser stellen es immer am unteren Rand dar.
Verwenden Sie die Elemente `<thead>`, `<tbody>` und `<tfoot>`, um Tabellen mit komplexen Datensätzen zu strukturieren. Diese Elemente helfen dabei, den Tabelleninhalt zu organisieren. Um ein unabhängiges Scrollen des Körpers zu ermöglichen, wenden Sie CSS-overflow-Eigenschaften an.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| align | right, left, center, justify, char | Legt die horizontale Ausrichtung des Inhalts innerhalb des Elements `<tfoot>` fest. Dieses Attribut wird von HTML5 nicht unterstützt. |
| bgcolor | bgcolor | Legt die Hintergrundfarbe der Zeilen innerhalb des Elements `<tfoot>` fest. Dieses Attribut wird von HTML5 nicht unterstützt. |
| char | character | Gibt die Ausrichtung des Inhalts innerhalb des Elements `<tfoot>` auf ein Zeichen an. Wird nur verwendet, wenn das Attribut align="char" ist. Dieses Attribut wird von HTML5 nicht unterstützt. |
| charoff | number | Gibt die Anzahl der Zeichen an, um die der Inhalt innerhalb des Elements `<tfoot>` vom durch das Attribut char angegebenen Zeichen aus ausgerichtet wird. Wird nur verwendet, wenn das Attribut align="char" ist. Dieses Attribut wird von HTML5 nicht unterstützt. |
| valign | top, bottom, middle, baseline | Gibt eine vertikale Ausrichtung des Inhalts innerhalb des Elements `<tfoot>` an. Dieses Attribut wird von HTML5 nicht unterstützt. |
Hinweis: Alle oben aufgeführten Attribute sind in HTML5 veraltet. Verwenden Sie CSS für die Gestaltung.
Das `<tfoot>`-Tag unterstützt außerdem die Global Attributes und die Event Attributes.
So gestalten Sie ein HTML-`<tfoot>`-Tag
tfoot {
background-color: #f2f2f2;
font-weight: bold;
}Practice
What is the purpose of HTML tfoot tag and where is it usually placed in a table?