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.

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.

 

Mit CSS Tabellen 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.

Code-Beispiel für die CSS-Datei:

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;
}

 

Code-Beispiel für die HTML-Datei:

<div class="table">
<div class="spalte-double">Ich bin eine "Double-Spalte".</div>
<div class="spalte-solid">Ich bin eine "Solid-Spalte".</div>
<div class="spalte-dashed">Ich bin eine "Dashed-Spalte".</div>
<div class="spalte-dotted">Ich bin eine "Dotted-Spalte".</div>
<div class="spalte-ridge">Ich bin eine "Ridge-Spalte".</div>
<div class="spalte-outset">Ich bin eine "Outset-Spalte".</div>
<div class="spalte-groove">Ich bin eine "Groove-Spalte".</div>
<div class="spalte-inset">Ich bin eine "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.