CSS/Eigenschaften/display: table
- 10min
- leicht
HTML-Tabellen sind die semantisch passende Struktur, um tabellarische Daten in Zeilen und Spalten darzustellen.
Früher gab es öfter den Wunsch auch andere Elemente wie Listen in sauberen Spalten präsentieren. Mit den Eigenschaften display: table-* können mit Nicht-Tabellen-Elementen Tabellen bzw. Raster erstellt werden. Die entsprechenden Angaben lassen sich ebenso auf HTML-Tabellenelemente anwenden.
--Matthias Scharwies (Diskussion) 14:03, 13. Jun. 2020 (CEST)
.table {
display: table;
border: thin solid steelblue;
padding: 5px;
}
.tr {
display: table-row;
}
.td,
.th {
display: table-cell;
border: thin solid #c82f04;
padding: 5px;
}
Das Beispiel definiert Klassen für div-Elemente. Die Klassennamen heißen genauso wie bekannte HTML-Tabellenelemente. Das muss nicht so sein und ist hier nur zu Demonstrationszwecken so. Die jeweiligen Klassen erhalten mit Hilfe von display Eigenschaften, durch die sich die Elemente, denen sie zugewiesen werden, wie die entsprechenden HTML-Elemente für Tabellen verhalten. Innerhalb des Dateikörpers wird dann im Beispiel eine waschechte Tabelle aus div-Elementen mit class-Attributen zusammengebaut.
Werte für display: table-*
Folgende Angaben sind in diesem Zusammenhang möglich:
-
table: Das Element enthält tabellarisch angeordnete Kindelemente und erzeugt eine neue Zeile. Wirkt wie das table-Element in HTML. -
inline-table: Das Element enthält tabellarisch angeordnete Kindelemente und wird im laufenden Textfluss angezeigt. Wirkt wie das table-Element in HTML, aber inline. -
table-row: Das Element enthält nebeneinander angeordnete Kindelemente. Wirkt wie das tr-Element in HTML. -
table-cell: Das Element steht für eine Tabellenzelle. Wirkt wie die Elemente th und td in HTML. -
table-row-group: Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Wirkt wie das tbody-Element in HTML. -
table-header-group: Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Kopfzeile einer Tabelle. Wirkt wie das thead-Element in HTML. -
table-footer-group: Das Element enthält eine Gruppe von Elementen mit nebeneinander angeordneten Kindelementen. Gedacht für die Fußzeile einer Tabelle. Wirkt wie das tfoot-Element in HTML. -
table-column: Das Element beschreibt die Eigenschaften der Zellen in einer Spalte. Wirkt wie das col-Element in HTML. -
table-column-group:Das Element enthält eine Gruppe von Elementen, die die Eigenschaft von Zellen in einer Spalte beschreiben. Wirkt wie das colgroup-Element in HTML. -
table-caption: Das Element steht für eine Tabellenüberschrift. Wirkt wie das caption-Element in HTML (auch für th-Elemente).
Siehe auch
- Tabelle in HTML
- Aufbau
- Gestaltung mit CSS
- Einstieg in Grid Layout
- Grid-Container + Grid-Items (Rasterelemente)
- benannte Linien und Rasterbereiche
- Responsive Raster ohne Media Queries
- Ausrichtung von Grid-Items
- Inhalte zentrieren
- align-content
- Grid + Flexbox
- Vertikal zentrieren mit
display:table-cell
- Web Components/Custom Elements
Listen im Tabellen-Look
