HTML-Tipps für Webentwickler

Tabellen richtig strukturiert mit thead, tbody und tfoot

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Unabhängig davon, ob es sich bei Ihrem Projekt um eine "große" Website handelt oder eine "kleine", Sie einen Webshop aufsetzen wollen oder einen privaten Blog betreuen – eines haben alle Webseiten gemeinsam: die Basis ist HTML. Profitieren Sie in dieser praktischen Tipps&Tricks-Sammlung von der jahrelangen Erfahrung der Trainerin Florence Maurice, die Ihnen unbekannte Features nahe bringt, zur Übersicht über die einzelnen Versionen verhilft oder oftmals nur mit kleinen, pfiffigen Hinweisen Ihren Alltag als Webdesigner und -programmierer erleichtert.
05:58
  Lesezeichen setzen

Transkript

Zur zusätzlichen Strukturierung von Tabellen, gibt es "thead", "tbody" und "tfoot". Diese haben so ihre Besonderheiten. Sehen wir uns das mal im Detail an. Wenn man über Tabellen redet, muss man unbedingt einen Disclaimer unterbringen. Tabellen werden selbstverständlich heute nur noch für tabellarische Daten benutzt, aber für tabellarische Daten braucht man Tabellen. Tabellen sehen folgendermaßen aus. Sie werden von einem table-Element umschlossen. Es gibt "tr"-Elemente für die einzelnen Zeilen und die Zellen. Dafür sind zuständig "td"-Elemente, beziehungsweise im Kopfbereich "th"-Elemente. Aber es gibt jetzt weitere Elemente, die eine Rolle spielen. Bei Tabellen selbst werden Sie sie nicht angeben. Sehen wir uns das am Beispiel einer sehr einfachen Tabelle an. Die hat ein "tr"-Element und da steht immer nur ein "th", beziehungsweise "td"-Element drinnen. Und wenn ich das jetzt formatieren möchte, könnte ich ja schreiben "table" und dann möchte ich formatieren die direkten "tr"-Elemente. Das heißt, die direkten Kindelemente. Das bedeutet dieser Selektor "tr", wenn es ein direktes Kindelement von "table" ist, - das ist aber der Fall - dann gebe ich die Hintergrundfarbe an. Ich möchte irgendwas Deutliches machen, um zu sehen, ob es klappt oder nicht. Wenn wir das im Browser aufrufen, dann erstaunlich, kein gelber Hintergrund. Woran liegt das denn? In den Browserentwicklertools sieht man, dass ein "tbody"-Element ergänzt wurde. Das hatten wir nicht geschrieben. Und damit greift mein Selektor nicht mehr, weil das "tr"-Element nicht mehr ein direktes Kind von "table" ist. Wir können das beheben, indem wir "tbody" an dieser Stelle angeben. Jetzt sind die Elemente gelb eingefärbt. Schöner ist es aber, wenn wir selbst "tbody" angeben. Damit das nicht zu solchen komischen unerklärlichen Phänomenen kommt. Und das habe ich an dieser Stelle vorbereitet. Wie sieht das aus? Also wir haben ein "tbody"-Element. Das umfasst meinen eigentlichen Inhalt. Zusätzlich zu "tbody" kann ich noch angeben "thead" für den Kopfbereich und bei Bedarf kann es auch sinnvoll sein, "tfoot" für einen Fußbereich zu verwenden. Die Reihenfolge ist dabei folgende: zuerst die "thead", dann "tfoot" und dann "tbody". Wenn wir das im Browser uns anschauen, dann sehen wir, der Fußbereich ist unten, obwohl er im Quelltext nach dem Kopfbereich kommt. Und der Inhaltsbereich ist eingefärbt. Dort verwenden wir ja "tbody". Browser setzen intern für diese Darstellung auf bestimmte "CSS"-Eigenschaften, die dann dafür sorgen, dass beispielsweise der Footer ganz unten angezeigt wird. Das kann man sich anzeigen lassen in den Entwicklertools. Und wenn ich dann auf meinen Fußbereich gehe, von der Tabelle sehe ich, dass vom Browser kommt ein "display: table-footer-group". Diese Angabe können wir auch bewusst setzen. Und das kann praktisch sein, wenn wir die Reihenfolge der Anzeige von Elementen verändern wollen. Sehen wir uns das am Beispiel an. Ich habe dieses Mal keine Tabelle, sondern ein "div"-Element mit vier "p"-Elementen. Kann jetzt hingehen und für dieses umfassende Element die Tabellendarstellung aktivieren. Und die einzelnen "p"-Elemente zu Tabellenzellen machen. Dadurch werden jetzt diese Elemente nebeneinander dargestellt. Wenn ich eine Darstellung untereinander möchte, und außerdem noch die Reihenfolge verändern, dann kann ich auf weitere Displayangaben zugreifen und ich habe die Angeben so gewählt, dass die Reihenfolge umgekehrt ist zu dem Ursprünglichen. Also ich möchte, dass das Element "vier" ganz oben dargestellt wird. Dafür kann ich auf " table-caption" setzen. Das Element "eins" soll ganz unten dargestellt werden. Dafür verwende ich "table-footer-group". Was wir uns eben ja angesehen hatten. Und "drei" soll nach dem "caption"-Element angezeigt werden. Und das erreiche ich über "display: table-header-group". Wenn wir das Beispiel ansehen, dann ist das Element "vier" ganz oben, dann "drei", dann "zwei", dann "eins". In diesem Film haben Sie gesehen, dass man bei Tabellen "thead", "tfoot" und "tbody" benutzen kann. "tbody" wird außerdem automatisch vom Browser gesetzt, wenn Sie es nicht einsetzen. "tfoot" kommt nach "thead", wird aber dann unten dargestellt. Und diese Display-Eigenschaften, die der Browser auch intern für die Darstellung verwendet, diese kann man auch bewusst einsetzen per "CSS", um beispielsweise die Reihenfolge von Elementen zu verändern.