HTML-Tag <tfoot>
Das <code><tfoot></code>-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 <code><tfoot></code>-Tag muss innerhalb des Elements <table> deklariert werden, nach den Elementen <caption> und <colgroup> (falls vorhanden). Beachten Sie, dass <code><tfoot></code> im Quellcode vor <code><tbody></code> platziert werden muss, obwohl Browser es immer am unteren Rand der Tabelle darstellen.
DANGER
Das <code><tfoot></code>-Tag muss mindestens ein <tr>-Tag enthalten.
TIP
Die Elemente <code><thead></code>, <code><tbody></code> und <code><tfoot></code> beeinflussen das Layout der Tabelle standardmäßig nicht. Verwenden Sie CSS-Eigenschaften, um das Aussehen der Tabelle anzupassen.
Syntax
Das <code><tfoot></code>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<code><tfoot></code>) und dem schließenden (<code></tfoot></code>) Tag geschrieben.
HTML <code><tfoot></code>-Tag
<table>
<thead> ... </thead>
<tfoot>
<tr>
<td> ... </td>
</tr>
</tfoot>
<tbody> ... </tbody>
</table>Beispiel für das HTML-<code><tfoot></code>-Tag:
HTML <code><tfoot></code>-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>Ergebnis
Das <code><tfoot></code>- und andere Tags zum Zusammenfassen von Tabelleninhalten
Das Element <code><tfoot></code> definiert einen Fußbereich für die Tabelle, der typischerweise Zusammenfassungs- oder Aggregatdaten enthält. Im Quellcode muss es vor dem Element <code><tbody></code> erscheinen, aber Browser stellen es immer am unteren Rand dar.
Verwenden Sie die Elemente <code><thead></code>, <code><tbody></code> und <code><tfoot></code>, 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 <code><tfoot></code> fest. Dieses Attribut wird von HTML5 nicht unterstützt. |
| bgcolor | bgcolor | Legt die Hintergrundfarbe der Zeilen innerhalb des Elements <code><tfoot></code> fest. Dieses Attribut wird von HTML5 nicht unterstützt. |
| char | character | Gibt die Ausrichtung des Inhalts innerhalb des Elements <code><tfoot></code> 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 <code><tfoot></code> 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 <code><tfoot></code> 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 <code><tfoot></code>-Tag unterstützt außerdem die Global Attributes und die Event Attributes.
So gestalten Sie ein HTML-<code><tfoot></code>-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?