Sie sind hier: Startseite -> HTML-Grundlagen -> tfoot-Tag (Tabelle -> Fußzeile)

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

Ergibt:

Stadt Nummer 1Stadt Nummer 2Stadt 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

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.

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.

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

Themenseiten

Diesen Artikel teilen

Infos zum Artikel

Fußzeile in der DatentabelleArtikel-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