Tabellen
Früher wurden Tabellen häufig verwendet, um vollständige Webseiten zu gestalten.
Für das Seitenlayout ist diese Methode heute ungeeignet, weil HTML die inhaltliche
Struktur beschreibt und CSS für die Gestaltung und das Layout zuständig ist.
HTML-Tabellen sind jedoch weiterhin die richtige Wahl, wenn tabellarische Daten
dargestellt werden sollen. Dazu gehören beispielsweise Preislisten, Fahrpläne,
Statistiken oder Messergebnisse.
Allgemeine CSS-Eigenschaften wie width, height,
background und border können auch auf Tabellen und
Tabellenzellen angewendet werden. Zusätzlich gibt es Eigenschaften, die speziell
das Verhalten von Tabellen steuern.
| Eigenschaft |
Bedeutung |
Mögliche Werte |
caption-side |
Position der Tabellenüberschrift |
top, bottom |
table-layout |
Verfahren zur Berechnung der Spaltenbreiten |
auto, fixed |
border-collapse |
Bestimmt, ob die Zellrahmen getrennt sind oder zusammenfallen |
separate, collapse |
border-spacing |
Abstand zwischen benachbarten Tabellenzellen |
eine oder zwei Längenangaben |
empty-cells |
Darstellung von Rahmen und Hintergrund leerer Zellen |
show, hide |
caption-side
Mit caption-side wird festgelegt, ob die mit
<caption> erzeugte Tabellenüberschrift oberhalb oder
unterhalb der Tabelle angezeigt wird. Die Eigenschaft ist vererbbar.
caption {
caption-side: bottom;
}
Mögliche Werte von caption-side
-
top: Die Tabellenüberschrift befindet sich oberhalb der
Tabelle. Dies ist der Standardwert.
-
bottom: Die Tabellenüberschrift befindet sich unterhalb
der Tabelle.
<table>
<caption>Umsätze im ersten Quartal</caption>
...
</table>
table-layout
Mit table-layout wird festgelegt, nach welchem Verfahren der
Browser die Breiten der Tabellenspalten berechnet. Die Eigenschaft ist nicht
vererbbar.
table {
width: 100%;
table-layout: fixed;
}
Mögliche Werte von table-layout
-
auto: Der Inhalt der Zellen beeinflusst die Spaltenbreiten.
Dies ist der Standardwert.
-
fixed: Die Spaltenbreiten werden anhand der Tabellenbreite,
vorhandener Spaltenbreiten und der ersten Tabellenzeile berechnet.
Damit table-layout: fixed zuverlässig wirkt, benötigt die Tabelle
eine festgelegte Breite. Zu langer Inhalt kann dabei über die berechnete
Spaltenbreite hinausragen und muss gegebenenfalls mit
overflow oder einem Zeilenumbruch behandelt werden.
border-collapse
Werden sowohl der Tabelle als auch ihren Zellen Rahmen zugewiesen, können
zwischen den Zellrahmen Abstände entstehen. Mit
border-collapse wird bestimmt, ob die Rahmen getrennt bleiben
oder zu einem gemeinsamen Rahmen zusammenfallen.
table {
border-collapse: collapse;
}
th,
td {
border: 1px solid #777;
}
Mögliche Werte von border-collapse
-
separate: Die Rahmen der einzelnen Zellen bleiben getrennt.
Dies ist der Standardwert.
-
collapse: Aneinandergrenzende Rahmen werden zu einem
gemeinsamen Rahmen zusammengefasst.
border-spacing
Mit border-spacing wird der Abstand zwischen benachbarten
Tabellenzellen festgelegt. Die Eigenschaft wirkt nur zusammen mit
border-collapse: separate und ist vererbbar.
Horizontale und vertikale Abstände
-
Bei einer Längenangabe erhalten der horizontale und der vertikale Abstand
denselben Wert.
-
Bei zwei Längenangaben bestimmt der erste Wert den horizontalen und der
zweite Wert den vertikalen Abstand.
table {
border-collapse: separate;
border-spacing: 10px 4px;
}
Mögliche Werte von border-spacing
-
Eine Längenangabe, beispielsweise
10px
-
Zwei Längenangaben, beispielsweise
10px 4px
Negative Werte sind für border-spacing nicht zulässig.
empty-cells
Mit empty-cells wird festgelegt, ob Rahmen und Hintergrund
leerer Tabellenzellen dargestellt werden. Die Eigenschaft wirkt nur bei
getrennten Rahmen und ist vererbbar.
table {
border-collapse: separate;
empty-cells: hide;
}
Mögliche Werte von empty-cells
-
show: Rahmen und Hintergrund leerer Zellen werden angezeigt.
Dies ist der Standardwert.
-
hide: Rahmen und Hintergrund leerer Zellen werden nicht
angezeigt.
Tabellen und display
Mit bestimmten Werten der Eigenschaft display können auch andere
HTML-Elemente das Darstellungsverhalten von Tabellenelementen erhalten.
| display-Wert |
Darstellung |
Entsprechendes HTML-Element |
table |
Tabelle auf Blockebene |
<table> |
inline-table |
Tabelle auf Inline-Ebene |
Keine direkte Entsprechung |
table-caption |
Tabellenüberschrift |
<caption> |
table-cell |
Tabellenzelle |
<td> oder <th> |
table-column |
Tabellenspalte |
<col> |
table-column-group |
Gruppe von Tabellenspalten |
<colgroup> |
table-header-group |
Tabellenkopf |
<thead> |
table-row-group |
Gruppe von Tabellenzeilen |
<tbody> |
table-footer-group |
Tabellenfuß |
<tfoot> |
table-row |
Tabellenzeile |
<tr> |
Tabelle mit div-Elementen
Im folgenden Beispiel erhalten div-Elemente mit verschiedenen
display-Werten das Darstellungsverhalten einer Tabelle, einer
Tabellenzeile und von Tabellenzellen.
<style>
.css-table {
display: table;
width: 100%;
border: 1px solid blue;
border-spacing: 5px;
}
.css-table-row {
display: table-row;
}
.css-table-cell {
display: table-cell;
padding: 10px;
border: 1px solid red;
}
</style>
<div class="css-table">
<div class="css-table-row">
<div class="css-table-cell">Erste Zelle</div>
<div class="css-table-cell">Zweite Zelle</div>
<div class="css-table-cell">Dritte Zelle</div>
</div>
<div class="css-table-row">
<div class="css-table-cell">Vierte Zelle</div>
<div class="css-table-cell">Fünfte Zelle</div>
<div class="css-table-cell">Sechste Zelle</div>
</div>
</div>
Durch diese Darstellung entsteht zwar optisch eine Tabelle, die Elemente
erhalten dadurch aber nicht automatisch die semantische Bedeutung einer
HTML-Tabelle.
Für echte tabellarische Daten sollten deshalb die dafür vorgesehenen Elemente
<table>, <caption>,
<thead>, <tbody>,
<tr>, <th> und
<td> verwendet werden. Für allgemeine Seitenlayouts sind
CSS Grid und Flexbox besser geeignet.