HTML Tfoot - Fußzeile in der Tabelle

Abschluss der Tabelle

Für viele unbekannt ist die Möglichkeit, in HTML eine Tabelle mit einer Fußzeile auszustatten. Normalerweise nimmt man dafür eine normale Zeile und füllt diese mit dem gewünschten Inhalt. Allerdings bietet der tfoot-Tag die Möglichkeit an, dass man die Fußzeile einfach mit CSS formatieren kann, da es eine Unterscheidung zu den anderen Zellen gibt.

Der thead-Tag für den Kopfteil ist noch einigermaßen bekannt, das Gegenstück mit dem tfoot-Tag hingegen kaum, kann aber durchaus auch nützlich sein.

tfoot-Tag für den Abschluss der Tabelle nutzen

<table> <thead> <tr> <th>Stadt Nummer 1</th> <th>Stadt Nummer 2</th> <th>Stadt Nummer 3</th> </tr> </thead> <tfoot> <tr> <td>2 Mio. Einwohner</td> <td>190.000 Einwohner</td> <td>270.000 Einwohner</td> </tr> </tfoot> <tbody> <tr> <td>Wien</td> <td>Linz</td> <td>Graz</td> </tr> </tbody> </table>

---

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

---

Ergibt:

Stadt Nummer 1	Stadt Nummer 2	Stadt Nummer 3
2 Mio. Einwohner	190.000 Einwohner	270.000 Einwohner
Wien	Linz	Graz

Im Beispiel wurde wieder die Beispieltabelle mit einer Zeile und drei Spalten gewählt, wobei sie zusätzlich eine Überschrift in Form eines Kopfteiles durch den thead-Tag erhält und außerdem eine Fußzeile durch den tfoot-Tag.

Man erkennt am Ergebnis, dass der Kopfteil ohne Zutun fett geschrieben wird und als Überschrift erkennbar ist. Der Fußteil bzw. die Fußzeile sieht hingegen wie die normale Zeile aus. Hier kann man aber durch die eigene Definition von tfoot sehr einfach mit CSS Formatierungen durchführen, um eine Unterscheidung herzustellen. Eigene Klassen sind nicht nötig. Natürlich kann man auch normale Zellen als Fußteil verwenden und eigens formatieren, das kann aber mitunter sehr aufwendig werden.

Wichtig ist bei der Nutzung von Kopfteil und Fußteil die Reihenfolge. Zuerst muss der Kopfteil mit dem thead-Tag eingesetzt werden, dann der Fußteil mit tfoot-Tag und erst dann die eigentliche Tabelle durch den tbody-Tag. Außerdem gilt es zu beachten, dass Kopfteil und Fußteil nur einmal verwendet werden dürfen.

Lesen Sie auch

---

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

---

So wie in normalen Texten kommt die Tabelle auch auf Internetseiten sehr oft vor und ist daher ein wichtiges Thema im Webdesign. Zum einen soll sie übersichtlich sein, zum anderen soll sie auch gefällig sein, wofür vor allem moderne CSS-Möglichkeiten Pate stehen. Die Grundstruktur sieht den table-Tag als Platzhalter vor und mit dem tr-Tag gibt es die Zeilen und mit dem td-Tag die Zellen.

• Tabelle (table)
• Zeile (TR)
• Table Data (TD)

Außerdem besteht die Möglichkeit, mit dem thead und tfoot Kopfzeile als Überschrift und Fußzeile als Abschluss einzubauen. Man kann die Spalten auch mit dem colgroup-Tag vorweg definiert, speziell in Sachen Breite.

• Thead
• Tfoot
• Colgroup

Wichtige Funktionen können gefragt sein, wenn man nicht die übliche Tabelle braucht, sondern bestimmte Zeilen zusammenführen muss oder auch Spalten zusammengehören.

• Zeilen verbinden
• Zellen verbinden

Themenseiten

Diesen Artikel teilen

• 
• 
• 
• 
• 

Infos zum Artikel

Artikel-Thema: HTML Tfoot - Fußzeile in der Tabelle
Beschreibung: Mit dem 🌍 tfoot-Tag kann man eine eigene Fußzeile in eine ✅ Datentabelle auf der Webseite festlegen und einbauen.

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel
Praxisartikel