Tabellen mit CSS erstellen

Schnöde, graue Tabellenrahmen müssen nicht sein. CSS bietet ebenfalls die Möglichkeit, Text in Tabellenform darzustellen. Dabei kann das Design der erstellten Tabellenform ganz einfach an die eigenen Bedürfnisse angepasst werden. Tabellen mit CSS erstellen ist dabei auch gar nicht schwer.

In diesem Artikel zeige ich dir, wie du mit CSS eine Tabelle erstellen und gestalten kannst, ohne dass du dabei auf die klassischen HTML-Tabellen zurückgreifen musst.

 

So kannst du Tabellen mit CSS erstellen

Mit CSS Tabellen zu erstellen hat mehrere Vorteile: Zum einen bist du nicht auf die HTML-Tabellen angewiesen, zum anderen bist du viel freier, was die Gestaltung der Tabellen angeht. Da die klassischen Tabellen ohnehin nicht als Layout-Elemente verwendet werden sollten (Stichwort: Semantische Darstellung der Website), bietet sich die CSS-Lösung an dieser Stelle natürlich an.

Beispiel (CSS & HTML):

body {
margin: 0 auto;
}
 div.table {
display: table;
width: calc(100% - 10px);
border: 1px solid blue;
padding: 5px;
}
 div.spalte-double {
display: table-cell;
border: medium double red;
width: 200px;
padding: 5px;
}
div.spalte-solid {
display: table-cell;
border: medium solid red;
width: 200px;
padding: 5px;
}
div.spalte-dashed {
display: table-cell;
border: medium dashed red;
width: 200px;
padding: 5px;
}
div.spalte-dotted {
display: table-cell;
border: medium dotted red;
width: 200px;
padding: 5px;
}
div.spalte-ridge {
display: table-cell;
border: medium ridge red;
width: 200px;
padding: 5px;
}
div.spalte-outset {
display: table-cell;
border: medium outset red;
width: 200px;
padding: 5px;
}
div.spalte-groove {
display: table-cell;
border: medium groove red;
width: 200px;
padding: 5px;
}
div.spalte-inset {
display: table-cell;
border: medium inset red;
width: 200px;
padding: 5px;
}
<div class="table">
<div class="spalte-double">"Double-Spalte"</div>
<div class="spalte-solid">"Solid-Spalte"</div>
<div class="spalte-dashed">"Dashed-Spalte"</div>
<div class="spalte-dotted">"Dotted-Spalte"</div>
<div class="spalte-ridge">"Ridge-Spalte"</div>
<div class="spalte-outset">"Outset-Spalte"</div>
<div class="spalte-groove">"Groove-Spalte"</div>
<div class="spalte-inset">"Inset-Spalte"</div>
</div>

 

Anzeigebeispiel ansehen

 

Tipp:

Du kannst auch verschiedene CSS-Attribute miteinander kombinieren, um weitere Effekte zu erzielen. Aber wie immer gilt: Im Zweifel eher sparsam mit den Möglichkeiten umgehen, die CSS bietet. Sonst wirkt eine Website schnell überladen.

Außerdem können unterschiedliche Browser CSS-Effekte unterschiedlich interpretieren. Es empfiehlt sich daher, die Website vor Veröffentlichung mit verschiedenen Browsern zu testen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.