Einführung
In HTML können Sie den Fußzeileninhalt einer Tabelle mithilfe des <tfoot>-Tags gruppieren. Die Tabellenfußzeile kann Zusammenfassungsinformationen, Erläuterungen oder Kommentare enthalten. Das <tfoot>-Tag ist eines der Kinder des <table>-Tags und wird in Verbindung mit den <thead>- und <tbody>-Tags verwendet. In diesem Lab werden Sie lernen, wie Sie in HTML Tabellenfußzeilen mit dem <tfoot>-Tag erstellen.
Hinweis: Sie können im
index.htmlprogrammieren und lernen, wie Sie in Visual Studio Code HTML schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.
Erstelle eine grundlegende Tabellenstruktur
Beginnen Sie mit der Erstellung einer grundlegenden Tabellenstruktur, die Tabellenkopf-, Tabellenkörper- und Tabellenfußzeilenabschnitte enthält.
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Alter</th>
<th>Geschlecht</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Männlich</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Weiblich</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Männlich</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Tabellenfußzeile</td>
</tr>
</tfoot>
</table>
</body>
</html>
Im obigen Code haben wir eine grundlegende Tabellenstruktur mit drei Spalten erstellt: Name, Alter und Geschlecht. Wir haben auch drei Zeilen mit Daten zur Tabelle hinzugefügt. Das <tfoot>-Tag enthält nur eine Zeile mit einer Zelle (<td>), die über drei Spalten geht (colspan="3").
Füge Inhalte zur Tabellenfußzeile hinzu
Sobald Sie die grundlegende Tabellenstruktur erstellt haben, können Sie Inhalte zum <tfoot>-Tag hinzufügen.
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Alter</th>
<th>Geschlecht</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Männlich</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Weiblich</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Männlich</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Durchschnittliches Alter:</td>
<td>35</td>
</tr>
</tfoot>
</table>
</body>
</html>
In diesem Beispiel haben wir einer Zeile zum <tfoot>-Tag hinzugefügt, die das durchschnittliche Alter der Personen in der Tabelle enthält. Die erste Zelle in der Zeile geht über zwei Spalten (colspan="2") und zeigt den Text "Durchschnittliches Alter:" an. Die zweite Zelle zeigt den tatsächlichen Durchschnittswert des Alters an.
Wende CSS auf die Tabellenfußzeile an
Sie können CSS-Stile auf das <tfoot>-Tag und seine Kind-Elemente anwenden, um das Aussehen der Tabellenfußzeile anzupassen.
<!doctype html>
<html>
<head>
<title>Table Footer using tfoot Tag</title>
<style>
tfoot {
hintergrundfarbe: #ccc;
schriftgewicht: fett;
textausrichtung: zentriert;
}
tfoot td {
padding: 10px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Alter</th>
<th>Geschlecht</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>35</td>
<td>Männlich</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>Weiblich</td>
</tr>
<tr>
<td>David</td>
<td>42</td>
<td>Männlich</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Durchschnittliches Alter:</td>
<td>35</td>
</tr>
</tfoot>
</table>
</body>
</html>
In diesem Beispiel haben wir mithilfe des CSS-Selectors tfoot Hintergrundfarbe, Schriftgewicht und Textausrichtungsstile auf das <tfoot>-Tag angewendet. Wir haben auch mithilfe des Selectors tfoot td Padding auf die Zellen innerhalb des Tabellenfußzeilenabschnitts angewendet.
Zusammenfassung
Das <tfoot>-Tag wird verwendet, um den Fußzeileninhalt einer Tabelle zu gruppieren. Es wird zusammen mit den <thead>- und <tbody>-Tags verwendet, um eine vollständige Tabellenstruktur zu erstellen. Sie können Inhalte und Stile zum <tfoot>-Tag und seinen Kind-Elementen mithilfe von HTML und CSS hinzufügen.
