Hauptmenü

Untermenü

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.

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.

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.

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.

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.

zurück zum vorherigen Abschnitt