Tabellen

Es gibt viele Möglichkeiten, über die normale Formatierung etwa von Text, Grenzen, Abständen hinaus, Tabellen gezielt zu beeinflussen.
Wichtiger Hinweis:
Tabellen meint in CSS Tabellen. Das sind so Dinger, in denen jede Zelle eine spezielle Bedeutung hat. Tabellen sind in der Vorstellung von CSS insbesondere auch vorlesbar, d.h. für Sehbehinderte verständlich. Deshalb sollen sie z.B. Beschreibungen, Überschriften, Spalten- oder Zeilenüberschriften und so was besitzen. Nicht so sehr im Blick sind diese in HTML fast unverzichtbaren Anordnungshilfen, die man gerne sechsfach schachtelt, um ein paar Zahlen gefällig anzuordnen.

Da CSS nicht nur auf HTML zielt, muß um den visuellen Aufbau oder die geeignete anderweitige Verwertung ein Riesen-Bohei gemacht werden, der den HTML-Handwerker sicher kaum tangiert. Ich liste hier die wichtigen Formatierungsmöglichkeiten auf, ohne jemals in die Tiefen der "Grenzstreitigkeiten" (border conflicts) eingestiegen zu sein.

Abstands-Bezeichnung Anwendung und Bedeutung Codebeispiel

border-collapse Zellgrenzen sollen zusammenfallen ( collapse) oder auch nicht ( separate). Dieses Attribut ist vergebbar für ganze Tabellen, nicht für einzelne Reihen- oder Zellen.
Spannend wird die Sache, wenn dicke Grenzen kollidieren (sollen). Ggf. muß dann der border-style manipuliert werden, damit der gewünschte Effekt - wenigstens in einem Browser - erzielt wird. Hier im table-Tag ist border-collapse:collapse eingetragen. Man vergleiche die Tabellen der anderen Seiten!

border-spacing

Abstand der Zellgrenzen in der Tabelle


3	4

Hier sind 20 Pixel Grenzabstand eingetragen. Gleichzeitig ist empty-cells:show; verlangt.

caption-side

soll die Anordnung von Caption, das ist hier der häßliche grüne Balken, der mit "Übersicht.." beginnt, bezüglich des Tabellenkörpers regeln. Es gibt die Möglichkeiten: top, bottom. Das Attribut muß dem Tag caption zugeordnet werden. Es gab noch left und staune: right, die aber nie in Browsern realisiert worden sind. Dafür soll es in CSS3 dann einen Ersatz geben.

Überschrift
Zellinhalt

Hier ist im caption-Tag vergeben: caption-side:bottom.

empty-cells Leere Tabellenzellen, die in HTML gewöhnlich nicht angezeigt werden und häßliche Löcher erzeugen, können vermieden werden. Es gibt die Optionen: show, hide. Das Tabellentag enthält lokal den Eintrag "empty-cells:show;", es folgt eine leere Tabellenreihe zum Ansehen, die man dann sieht, wenn es funktioniert.

speak-header Legt fest, wie oft die Zeilen- oder Spaltenüberschriften beim Vorlesen der Seite gesprochen werden. Die Möglichkeiten sind: once, always und werden logischerweise zum th-Tag vergeben. für die Tabellen dieses Kurses ist speak-header:always verlangt.

table-layout Die Art der Bemessung einer Tabelle: auto, fixed wird festgelegt. Wenn die Tabelle sich wie in HTML ohne Größenangaben verhält, also sich allein den Inhalten anpaßt, wird das hier mit auto kodiert. Bei fixed werden vorgegebene Werte angenommen bzw. die Abmaße gleichmäßig verteilt. alle Tabellen dieses Kurses sind mit table-layout:fixed kodiert.

text-align Die Textausrichtung mit left, right, center, justify funktioniert auch innerhalb von Tabellenzellen. Die vertikale Ausrichtung über eine Kolumne, die mal vorgesehen war, aber nicht klappte, ist abgeschafft! schade

width, height

Überraschenderweise sind diese beiden Attribute auch in CSS erlaubt. Anzugeben sind relative oder absolute Zahlwerte. Wie man leicht herausfindet, sind sich die wichtigsten Browser nicht einig darin, worauf sich im Zweifelsfall ein <table style="width:100%">... bezieht.

hier wird verlangt, daß eine Tabelle mit drei leeren Zellen der Breiten 1px, 10px und 50px, ohne padding und ohne margin sowie einer Höhe von 5px angezeigt wird.