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.
Ü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:
Wir sehen, dass die Beschriftung standardmäßig zentriert oberhalb der Tabelle erscheint.
Ü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:
Ü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.
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:
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.
