CSS - Elemente - Tabellen
1. Grundsätzlich
... kann man bei Tabellen problemlos Formatierungen mit den schon bekannten Anweisungen vornehmen. Also Schriften, Abständen, Hintergründe, Rahmen und so weiter und so fort. Da aber das "klassische" CSS gerade in diesem Punkt ein paar Schwächen aufwies, wurden mit CSS 2 spezielle Elemente für diesen Typ hinzugefügt.
2. border-collapse
Die wohl interessanteste Anweisung im Bezug auf Tabellen. Ihr kennt sicher das Problem, dass man schöne Rahmen in einer Tabelle haben
möchte. Leider verdoppeln die sich dann immer zwischen den einzelnen <td>
-Elementen. Das liegt an den Vorgaben.
separate
Zeilen fallen nicht zusammen (Standardwert)collapse
Zeilen fallen zusammen
Bei CSS 2 war collapse
der Standardwert und die Tabellenrahmen sahen so aus, wie man es gewohnt war. Aber irgendein
Vollhonk kam auf die Idee, mit CSS 2.1 seperate
als Normalwert festzulegen.
3. border-spacing
Definiert den Abstand der einzelnen Zellen zueinander und entspricht dem HTML-Attribut cellspacing
. Erlaubt sind
ausschließlich numerische Angaben. Wird aber leider weder von Internet Explorer 6 noch von seinem Krüppelnachfolger mit der Nummer 7
verstanden. Oh Bill, what have you done with my code?
4. caption-side
Legt fest, ob eine Tabellenüberschrift (<caption>
) an Beginn oder am Ende stehen soll. Welcher Sinn sich dahinter
versteckt, ist mir allerdings schleierhaft. Dabei kann man sich zwischen zwei Werten entscheiden.
top
oben (Standardwert)bottom
unten
5. empty-cells
Wenn man mit Rahmen arbeitet, legt man hiermit fest, ob leere Zellen einen bekommen oder nicht. Dabei gibt es zwei Angabemöglichkeiten.
hide
Bei leeren Zellen wird kein Rahmen gezeigt (Standard)show
Bei leeren Zellen wird der Rahmen gezeigt
Fragt mich nicht, warum hide
als Standardwert festgelegt wurde. War wohl derselbe Heini, der für den Humbug bei
border-collapse
verantwortlich war. Auf jeden Fall handelt es sich bei dem Typen um keinen Designer. Denn die bekommen
bei den Standardwerten immer Schreikrämpfe.
6. table-layout
Beeinflusst die Darstellung der Spaltenbreiten. Auch hier existieren zwei Möglichkeiten.
auto
fixed
Bei auto
stellt der Browser die Tabelle so dar, wie es ihm gerade in den Kram passt. Es sei denn, man hat zum Beispiel bei den
<td>
keine Breitenangaben definiert. Ist sehr unsicher, da es da zu abweichenden Darstellungen kommen kann. Besonders der
Internet Explorer (6 und 7) ist dafür berüchtigt.
Und darum gibt es fixed
. Wenn man keine Breitendefinitionen hat, so orientiert sich der Browser an den einzelnen Inhalten. Ist
schon besser, aber immer noch nicht hundertprozentig sicher. Wenn man explizit sagt, wie breit die Spalten sein sollen, so hängt die
Darstellung von korrekten Werten ab. Da das ein wenig komplizierter ist, werde ich bald ein Tutorial zu dem Thema nachreichen.
7. Ausblick
Jetzt solltet ihr mit der Theorie zu HTML und CSS vertraut sein. Vorausgesetzt, ihr habt die komplett durchgelesen. Mein Tipp, setzt euch erst mal an die Tutorials, damit ihr ein Gefühl dafür bekommt. Und dann nehmt euch den Punkt Advanced CSS vor. Denn da geht es ans Eingemachte und ihr werdet noch eine Menge Dinge lernen.