Tabellen

Tabellarische Daten werden mit HTML Tabellen dargestellt. Die Formatierung der Tabellen und Tabelleninhalte geschieht wie immer mit CSS. Außerdem bietet CSS noch die Möglichkeit Blockelementen ein tabellenartiges Verhalten zuzuweisen. Das geschieht mit der Eigenschaft display. Auf ein so verändertes Blockelement kann man, wie auch auf Tabellen, alle CSS Eigenschaften für Tabellen anwenden. Es ist wichtig zu verstehen, dass die so veränderten Blockelemente keine tabellarischen Daten erfassen sollen, sondern dass es lediglich darum geht, dass Blockelemente sich wie Tabellen verhalten. Das kann für das Layout sehr nützlich sein.

Vertikale und horizontale Ausrichtung

Zur Ausrichtung des Inhalts innerhalb einer Tabellenzellen stehen CSS Eigenschaften zur Verfügung. Man findet sie unter dem Thema Texteigenschaften. Hier sind in erster Linie text-align und vertical-align zu nennen.

Tabellen beschriften

caption-side

Mit dem HTML Element caption kann man einer Tabelle eine Überschrift zuweisen. Mit der CSS Eigenschaft caption-side wird die Position der Überschrift definiert.

table {caption-side: bottom;}

so sieht's aus

caption-side
Eigenschaft Wert Bedeutung
Standardwert top
Vererbbar ja
Anwendbar table oder Elemente mit display:inline- table
caption-side top oben
bottom unten
left links
right rechts

Rahmen darstellen

border-collapse

Im Beispiel sieht man sofort den Unterschied zwischen den beiden Werten. Bei collapse fallen die Rahmen zusammen und bilden keine Zwischenräume zwischen den einzelnen Tabellenzellen.

table {border-collapse: collapse;}

so sieht's aus

border-collapse
Eigenschaft Wert Bedeutung
Standardwert separate
Vererbbar ja
Anwendbar table oder Elemente mit display:inline- table
border-collapse collapse Rahmen werden zu einem Rahmen ohne Zwischenräume
separate Zellen einzeln mit Zwischenräumen

Rahmenabstand

border-spacing

Der Abstand zwischen den Zellen wird mit border-spacing festgelegt

table {border-spacing: 5px;}

so sieht's aus

border-spacing
Eigenschaft Wert Bedeutung
Standardwert 0
Vererbbar ja
Anwendbar table oder Elemente mit display:inline- table
border-spacing Zahlenangabe Zahlenangabe mit Maßeinheit

Leere Tabellenzelle

empty-cells

Einige Browser, zeigen leere Tabellenzellen oft gar nicht an <td></td>. Das sieht nicht schön aus und kann mittels CSS beeinflusst werden.

table {empty-cells: show;}

so sieht's aus

empty-cells
Eigenschaft Wert Bedeutung
Standardwert show
Vererbbar ja
Anwendbar table oder Elemente mit display:inline- table
empty-cells show Umrandung wird angezeigt
hide Umrandung wird nicht angezeigt

Tabellenlayout

table-layout

Mit der Eigenschaft table-layout beeinflusst man das Verhalten, in dem Punkte, dass Tabellen ihre Breite automatisch an den Inhalt anpassen, oder dass eine Größe definiert wird und Text sich in die vorgegeben Breite einpasst. Da beim Wert auto der Browser eventuell die gesamte Tabelle vergrößern muss, wird sie erst angezeigt, wenn der vollständige Inhalt der Tabelle geladen ist.

so sieht's aus

table-layout
Eigenschaft Wert Bedeutung
Standardwert auto
Vererbbar ja
Anwendbar table oder Elemente mit display:inline- table
table-layout auto Wenn der Inhalt nicht die Zelle passt, wird die Zelle vergrößert
fixed Der Inhalt passt sich an oder wenn er nicht passt, wird er abgeschnitten (IE) oder läuft über den Zellenrand hinaus (Opera Firefox).

Weitere Beispiele

Html Seite mit vertikal zentriertem Inhalt

Drop Down Menü mit List O Matic