HTML5 wurden alle früher üblichen Attribute aus dem einleitenden
-Tag entfernt, die der physischen Formatierung dienten. Das gilt auch für die Attribute border und width , die im HTML 4.0-Strict-Standard aus Performance-Gründen beim Rendern großer Tabellen noch erlaubt waren. Mit Hilfe von CSS bzw. entsprechenden CSS-Eigenschaften können Sie eine Tabelle nach Ihren Wünschen gestalten, inklusive der Eigenschaften für Rahmen ( border ) und Breite ( width ). Tabellen, Zeilen, Kopf- und Datenzellen können Sie mit CSS mit Rahmen, Gitternetzlinien, Innenabständen zwischen Zellenrändern und Zelleninhalten, Hintergrundfarben und vielem mehr versehen. Erwähnt werden soll jedoch das cellpadding -Attribut, das ebenfalls zu den früher verbreiteten, physischen Tabellenattributen gehört. Es steuert den Abstand zwischen Tabellenzellen. Da die entsprechende CSS-Eigenschaft border-spacing von veralteten, aber leider immer noch verwendeten Browsern wie dem Internet Explorer 6 nicht erkannt wird, kann es sinnvoll sein, dieses Attribut zu notieren. Mit
legen Sie beispielsweise einen Zellenabstand von 3 Pixeln fest, was vom Internet Explorer 6 in dieser Form erkannt wird. Da diese Version des Browsers zum Redaktionszeitpunkt des Buches nur mehr 1,5% der verwendeten Browser darstellt, kann das Attribut auch ignoriert werden. Die Anzahl der Zellen sollte bei jeder Zeile gleich sein, sodass die Tabelle durchweg die gleiche Anzahl an Spalten pro Zeile hat. In der ersten Zeile, die Sie definieren, legen Sie deshalb durch die Anzahl der dort definierten Zellen die Anzahl der Spalten Ihrer Tabelle fest. Tabellenzellen dürfen auch leer sein. Wenn Sie in einer Zeile für eine Spalte keine Daten eingeben wollen, notieren Sie ein einfaches
. Einige ältere Browser stellen solche Zellen bei optischer Zellensichtbarkeit jedoch als »nicht vorhanden« dar. Notieren Sie in einem solchen Fall einfach ein erzwungenes Leerzeichen als Zelleninhalt:
5.1.2 Tabelle mit Bereichen für Kopf, Körper und Fuß Sie können eine Tabelle in einen Kopfbereich, einen oder mehrere Datenbereiche und einen Fußbereich aufteilen. Beispiel
Betroffene Menschen
Assoziation 1
Assoziation 2
Assoziation 3
betroffen: 3,5 Mio. Menschen
betroffen: 1,8 Mio. Menschen
betroffen: 1,3 Mio. Menschen
Berlin
Hamburg
München
Miljöh
Kiez
Bierdampf
Buletten
Frikadellen
Fleischpflanzerl
Erläuterung Den Tabellenkopf leiten Sie mit
ein (thead = table head = Tabellenkopf). Daran anschließend können Sie eine oder mehrere Zeilen der Tabelle notieren, die zum Kopfbereich gehören sollen. Mit
schließen Sie den Tabellenkopf ab. Sinnvollerweise sollten die Tabellenzellen in diesem Bereich Kopfzellen (
…
) sein. Wenn Sie einen Tabellenfuß notieren möchten, müssen Sie ihn vor den Tabellenkörper-Elementen notieren. Der Tabellenfuß wird durch
…
markiert (tfoot = table foot = Tabellenfuß). Dazwischen können Sie eine oder mehrere Zeilen der Tabelle notieren, die zum Fußbereich gehören sollen. Bild 5.3: Im Browser wird die Notationsreihenfolge richtig aufgelöst und der Tabellenfuß unten angezeigt. Einen Tabellenkörperbereich markieren Sie mit
…
(tbody = table body = Tabellenkörper). Innerhalb davon notieren Sie den Datenbereich mit einer oder mehreren Tabellenzeilen. Weitere Hinweise Die Aufteilung einer Tabelle mittels thead , tfoot und tbody ist freiwillig. Wenn Sie kein solches Element angeben, gelten alle Zeilen der Tabelle als Tabellenkörper. Falls Sie jedoch mit den Elementen arbeiten, müssen Sie die Reihenfolge 1. thead , 2. tfoot , 3. tbody beachten. Die Elemente thead und tfoot dürfen pro Tabelle nur einmal vorkommen, das tbody -Element einmal oder beliebig oft. Die Elemente für Tabellenkopf, Tabellenfuß und Tabellenkörper haben grundsätzlich keine sichtbare Wirkung im Browser. Es handelt sich um semantische Auszeichnungen, die Sie mit Hilfe von CSS bzw. CSS-Eigenschaften nach Wunsch
Kostenlos Online Lesen 
