Tabellen

Auf dieser Seite:

Viele Daten in Spalten gruppieren, das leisten Tabellen. Eine Tabelle zu strukturieren, das leisten die HTML Tabellenelemente und Attribute. Diese Struktur sichtbar und hörbar zu machen, das leistet CSS.

Style die Tabellen deiner Seite - style nicht deine Seite mit Tabellen. Achtung, die optischen Möglichkeiten werden unbegrenzt, wenn die Rahmen wichtiger sind als die Inhalte.

Ungestylt

HTML-Tabelle Doppelrand
Eckzelle	K1	K2	K3	K4
Z1	z1k1	z1k2	z1k3	z1k4
Z2	z2k1	z2k2	z2k3	z2k4
Z3	z3k1	z3k2	z3k3	z3k4
Z4	z4k1	z4k2	z4k3	z4k4

Massangaben

width: height:

Die unformatierte Tabellgrösse richtet sich nach der Summe der Zellenbreiten und Zellenhöhen, bzw. deren Zelleninhalten.
Per CSS können die Tabellenmasse vorgegeben werden, und zwar in Pixeln (px), oder als Prozent der Seitenmasse (%), das macht bei der Breite Sinn.
Die grösste Zellbreite betimmt die Breite der Spalte (Kolonne), auch wenn jene Zelle in Mitten oder am Ende der Tabelle liegt. So ist es oft besser, die Zellen der erste Zeile werden massgebend, z.B. die th werden bemessen. Angaben in Prozenten beziehen sich hier auf die Tabellenbreite.
Bei Pixelmassen ist das Boxmodell zu beachten, Rahmen, Padding und Abstände zwischen den Zellen (Margin gibts hier nicht) machen das Rechnen etwas kompliziert.
Auch das col-Tag liesse sich für Breitenangaben nutzen, wenn die colcroup in HTML bestimmt wurde.
Zeilenmasse machen hingegen eher Sinn in der Höhe. Auch hier ist bei Pixelangaben mit dem Boxmodell zu rechnen.
Da die Tabelle erst aufgebaut wird, wenn alle Masse durch den Browser berechnet wurden, sind vorgegebene Breiten durchaus hilfreich, die Gesammthöhe vorzugeben hingegen birgt das Risiko, dass nicht genügend oder zuviel Platz zur Verfügung steht.

Zellen mit fixer Grösse

table-layout:auto

Ein Zellinhalt, z.B. ein Bild, erweitert die Zelle auf seine Grösse, ein Text erweitert die Zelle auf seine Länge, auch wenn (zu kleine) Zellmasse angegeben wurden. Dieses Aufreissen der Zellen kann unterbunden, der Aufbau der Tabelle beschleunigt werden, wenn der Browser von Anfang an weiss, wie er die Massangaben zu interpretieren hat.
Mit table-layout:fixed auf das table-Element angewendet, gelten die angegebenen Masse der Tabelle. Wenigstens in der Breite sind Massangaben sinnvoll, Breite und Höhe anzugeben kann zur Beschneidung eines Textes führen. Mit der Eigenschaft table-layout:auto gilt der Platzbedarf des Inhaltes - wie ohne Angabe.

table-layout:fixed

Scrollbare Zellen

Durch einen Div-Container lässt sich eine in der Grösse festgelegte Zelle dennoch überfüllen:

Viel Text	HTML	CSS
Dieser Text befindet sich in einer Tabelle mit festgelegten Zellengrössen. Wie verhindere ich, dass die Zelle durch den langen Text dennoch aufgestossen wird, und wie erhalte ich diesen Scrollbalken? Mit einem Div-Container in der Zelle. Der Container muss eigene Massangaben besitzen! (Die Masse der Tabellenzelle reichen nicht und auch 'table-layout:fixed' nutzt nichts.)	<td width="240" height="80"> `<div id="skrollbox"> Text </div>` </td>	<style type="text/css"> `#skrollbox { width:240px; height:80px; overflow:auto; border: 2px solid Gold; padding: 2px; background-color: #f0f8ff; }` </style>

Nützliche Formatierungen

Diese Formatierungen werden in den folgenden Beispielen gelegentlich eingesetzt

caption-side:

Die Tabellenüberschrift unter die Tabelle setzen:
.einrandig { caption-side: bottom; } /* right ginge auch im FF */

style='speak-header:always'

Weiter lässt sich als Style im th-Tag angeben, ob bei der Sprachausgabe einer Tabelle, die Spaltenüberschrift vor jeder Datenzelle erneut vorgelesen wird 'speak-header:always', oder nur einmal 'speak-header:once'.

page-break-inside: avoid !important;

Damit findet beim Drucken innerhalb einer Zelle/Zeile kein Seitenumbruch statt: 'td, th, tr { page-break-inside: avoid !important; }, !important überschreibt dabei alle anderslautenden styles.

tr:hoover td:hoover

Hover-Effekt je Tabellenzeile oder -Zelle (für ältere IE müssten wir JavaScript bemühen):
tr:hover { background-color: #ADDFE6; }

Rahmen und Ränder

Doppelränder aufheben

border-collapse: und border-spacing:

border-collapse:collapse; wird nur auf das table-Element angewendet, es hebt die doppelten Ränder bzw. die Zwischenräume zwischen dem Tabellenrand und den Zellenrändern und untereinander auf.

Obige CSS Angabe überschreibt die HTML Angabe cellspacing="10px"!

Die HTML Angabe cellspacing heist in CSS: border-spacing: 50px; 10px, erst die Angabe für den horizontalen Abstand dann die Angabe für den vertikalen Abstand.

margin: und padding:

Der Aussenabstand (margin) gibt es nur für die ganze Tabelle, nicht für Zellen (das Equivalent für Zellen ist das oben behandelte border-spacing).
Der Innenabstand in HTML 'Cellpadding' ist in CSS das bekannte 'padding'.

CSS-Tabelle als Raster
Ecke	K1	K2	K3	K4
Z1	z1k1	z1k2	z1k3	z1k4
Z2	z2k1	z2k2	z2k3	z2k4
Z3	z3k1	z3k2	z3k3	z3k4
Z4	z4k1	z4k2	z4k3	z4k4

Zellenabstände

CSS-Tabelle als Felder
Ecke	K1	K2	K3	K4
Z1	z1k1	z1k2	z1k3	z1k4
Z2	z2k1	z2k2	z2k3	z2k4
Z3	z3k1	z3k2	z3k3	z3k4
Z4	z4k1	z4k2	z4k3	z4k4

Dem table-Tag zugeordnet für den Aussenramen:
.einrandig { border: 2px solid #338BA6; border-collapse: collapse; }
.zweirandig { border: 1px solid #338BA6; border-spacing: 50px 10px; }

Für die Zellen:
.einrandig td, .einrandig th { border: 1px solid #338BA6; }
.zweirandig td, .zweirandig th { border: 5px solid #338BA6; }

Rahmen rechts, unten, links und oben

border-top: border-right: border-bottom: border-left:

Einzelne Zellen können nun Rahmen haben (früher musste man dazu eine ganze Tabelle mit äusserem Rahmen in eine Zelle legen), per CSS kann ich jetzt sogar jeder einzelnen Zellen-Seite einen anderen Rahmenteil zuordnen.

Es gibt CSS-Genies, welche mit verschachtelten Tabellen, verbundenen Zellen und Rahmen konkrete Kunst und Diagramme erstellen, ja es existiert gar ein Alphabet (welches nicht von Maschinen gelesen werden kann).

Hintergrund bei Rahmen

Jede Browsergeneration hat so ihre Eigenheiten, border-collapse, border-bottom, border-style, etc. konkurenzieren sich zuweilen untereinander und mit anderen Angaben oder in den Ecken.
Beim einen Browser geht der Hintergrund unter den Rahmen, beim anderen nur bis zum Rahmen oder bis Mitte Rahmen. Ausserdem stellte der FF runde Punkte dar, wenn die Tabelle nicht mit 'border-collapse:collapse;' formatiert wird (vergleiche folgende Tabelle in diversen Browsern für den neuesten Stand der Dinge).

Tabelle mit 2 Zellen

<td class="dot2"></td> .dot2 { background-color: #dcdcdc; border: 20px dotted maroon; border-bottom: 20px dotted pink }

Leere Zellen zeigen

empty-cells:show

Der IE 7 lässt die Ränder und Hintergründe von leeren Zellen einfach weg, weshalb ich in leere Zellen immer ein erzwungener Leerschlag oder ein transparentes Gif hinein legen musste, und wer weiss wie der IE sich in zukünftigen Generationen verhällt...
Zur kontrollierten Darstellung von Rändern oder nicht gibt es nun empty-cells:show / hide. Die obere der beiden folgenden Tabellen ist auf show, die untere auf hide gestellt.

-
	-
		-

:empty

Durch die Pseudoklasse :empty lassen sich leere Zellen (td) finden und kennzeichnen:
.finde td:empty {background-color: #def; border:0; }

-
	-
		-

Zebra Tabellen

Per Klasse die Zeilen hervorheben

CSS-Tabelle Zebra
Eckzelle	K1	K2	K3	K4
Z1	z1k1	z1k2	z1k3	z1k4
Z2	z2k1	z2k2	z2k3	z2k4
Z3	z3k1	z3k2	z3k3	z3k4
Z4	z4k1	z4k2	z4k3	z4k4

Die Tabellenzeilen von Hand klassifizieren (das ist etwas mühsam und beim Einfügen einer Zeile kriege ich Probleme):
.zebra { border: 1px solid #CC9; border-collapse: collapse;} .zebra th, .zebra td { width: 60px; text-align: center; } .kopfzeile { background-color: #CC9; } .zweitzeile { background-color: #E5E5CD; }

Per Col-Klasse Spalten (Kolonnen) hervorheben

CSS-Tabelle senkrechtes Zebra
Eckzelle	K1	K2	K3	K4
Z1	z1k1	z1k2	z1k3	z1k4
Z2	z2k1	z2k2	z2k3	z2k4
Z3	z3k1	z3k2	z3k3	z3k4
Z4	z4k1	z4k2	z4k3	z4k4

<colgroup> <col width="20%" style="background-color:#cc9"; /> <col width="20%" style="background-color:#F5F5F5"; /> <col width="20%" style="background-color:#E5E5CD"; /> <col width="20%" style="background-color:#F5F5F5"; /> <col width="20%" style="background-color:#E5E5CD"; /> </colgroup>

CSS3 Zebra Tabelle

Neu durch CSS3 ist nur der Zebraeffekt (im IE 8 geht der aber noch nicht):
#css3-tabelle tr:nth-child(2n) { background-color: #fC9; }

Eine CSS3 Tabelle
Kopfzeile	Spalte A	Spalte B	Spalte C
Fusszeile
Zeile 1	1a	1b	1c
Zeile 2	2a	2b	2c
Zeile 3	3a	3b	3c
Zeile 4	4a	4b	4c
Zeile 5	5a	5b	5c
Zeile 6	6a	6b	6c

#css3-tabelle { width:50%; border-collapse: collapse; }
#css3-tabelle caption { text-align: right; margin-bottom: 10px; }
#css3-tabelle thead, #css3-tabelle tfoot { background-color: #c99; border: 1px solid #fff; }
#css3-tabelle tbody tr { background-color: #fCf; border: 1px solid #fff; }
#css3-tabelle tbody td:hover { background-color: #f99; }
#css3-tabelle th, #css3-tabelle td { text-align: left; padding:3px; padding-left:8px; }

Check den Code.

Navigationen >> << Listen

Ich bin hier: > CSS Lehrling >> Tabellen