Das Erstellen einer Tabelle ist prinizpiell zwar recht simpel, in der Praxis braucht man aber immer etwas Geduld, da man nicht so komfortabel wie etwa in einer Textverarbeitung zwischen den Tabellenzellen hin- und herspringen kann.
Eine Tabelle wird durch das Tag <table> </table> gekennzeichnet. Eine Tabelle wird dann zeilenweise eingegeben. Innerhalb von <table> </table> wird jede Zeile von <tr> </tr> eingeschlossen. Die Abkürzung steht für table row. Schließlich muss man innerhalb einer Zeile die einzelnen Einträge, also die Zellen, mit <td> </td> (table data) auszeichnen.
Unsere Beispieltabelle sieht dann so aus:
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Übungsaufgabe
Erstelle in HTML eine Tabelle mit Deinem Stundenplan für Montag und Dienstag.
Tabellen ohne CSS mit Beschriftung und Spaltenüberschriften
Wir haben in HTML die Möglichkeit einerseits die gesamte Tabelle mit einer Überschrift - oder besser gesagt Beschriftung - zu versehen und andererseits die Überschriften der einzelnen Spalten hervorzuheben.
Eine Beschriftung der Tabelle wird mit dem Tag <caption> eingeschlossen. Mit CSS können wir übrigens diese Beschriftung auch so umgestalten, dass es keine Überschrift mehr ist, sondern stattdessen als kleine Anmerkung (z.B. für eine Quellenangabe) unter der Tabelle erscheint.
Die Spaltenüberschriften sehen im HTML-Code fast so aus wie ganz normale Einträge in der Tabelle. Wir müssen hier lediglich statt <td> </td> das Tag <th> </th> (table header) verwenden.
Sehen wir uns dieses Beispiel an:
So sieht sie im Browser aus:
Wir sehen, dass die Beschriftung standardmäßig zentriert oberhalb der Tabelle erscheint.
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Übungsaufgabe
Markiere in Deiner Tabelle die Spaltenüberschriften.
Danach füge Deiner Tabelle eine sinnvolle Beschriftung hinzu.
Tabellen mit CSS gestalten
Nun wird die Tabelle aus dem letzten Beispiel mit CSS umgestaltet. Der HTML-Code ist noch derselbe, nur wurde hier zur folgenen CSS-Datei verlinkt:
Die CSS-Datei sieht so aus:
Darstellung im Browser:
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Übungsaufgabe
Verlinke Deine HTML-Datei mit Deiner eigenen Tabelle mit einer CSS-Datei. Modifiziere dann Deine Tabelle mithilfe von CSS.
Analysiere durch Testen von Beispielwerten, welche Funktionen die Eigenschaften border-spacing und padding haben.
Übungsaufgabe
Erstelle mit HTML und CSS eine solche Tabelle:
Vertiefung: Kopf- und Fußbereich
Den Kopfbereich einer Tabelle kann man zum Beispiel verwenden, um die erste Zeile hervozuheben ohne jede einzelne Zelle als Überschrift zu markieren. Man kann damit auch etwas genauer verschiedene Zellen differenzieren. In diesem Beispiel wurde mit <thead> </thead> die erste Zeile als Kopfbereich markiert. Mit <th> </th> wurden hier nur Samstag und Sonntag als Spaltenüberschriften gekennzeichnet. Mittels CSS wurde dann unter Anderem die Schriftfarbe für den Kopfbereicht (thead) auf Rot gesetzt. Spaltenüberschriften (th) wurden zusätzlich mit CSS fettgedruckt und haben einen schwarzen Hintergrund erhalten.
Hier die CSS-Datei:
Die Darstellung im Browser:
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
Neben dem Kopfbereich sehen wir in diesem Beispiel auch einen Fußbereich. Diesen kennzeichnet man mit <tfoot> </tfoot>. Auch diesen kann man dann mit CSS frei gestalten. In diesem Beispiel wurde die Schrift etwas verkleinert.
Vertiefung: Zellen verschmelzen und leere Zellen ausblenden
Das Verschmelzen von Zellen sollte sich nur ansehen, wer im Umgang mit Tabellen schon sehr sicher ist!
Sehen wir uns zunächst an, was erreicht werden soll:
Hier wurden die beiden Zellen, die Kanu enthalten verschmolzen. Außerdem wurden auch die beiden Zellen unten rechts mit dem Text zum Mindestalter verschmolzen.
Wenn man es genau nimmt, wurden hier keine Zellen verschmolzen, sondern stattdessen wurden zwei Zellen ausgeweitet. Die Zelle mit dem Eintrag Kanu wurde über zwei Zeilen ausgeweitet, die unten rechts hingegen über zwei Spalten.
Mittels der Zusatzangabe rowspan="2" wurde die Zelle Kanu auf zwei Zeilen ausgedehnt. Sieht man im HTML-Code genau hin, sieht man, dass daher in der zweiten Zeile eine Zelle fehlt. Der Browser erkennt dies und folgert, dass logischerweise diese fehlende Zelle durch die nun ausgedehnte Zelle aus der Zeile darüber ausgefüllt wird.
Diese Tabelle wurde mit CSS verschönert:
Dazu gehört diese CSS-Datei:
Sicher ist Dir auch aufgefallen, dass die leere Zelle unten links nicht mehr zu sehen ist. Dies wurde mit der CSS-Angabe empty-cells: hide im Tag table erreicht.
Hier kannst Du dieses Beispiel im Browser vollständig anzeigen lassen!
