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.

Im Folgenden zeige ich dir dazu ein Beispiel, wie so etwas aussehen könnte. Zunächst zeige ich dir dazu den hier beispielhaft verwendeten CSS Code. Diesen kannst du selbstverständlich modifizieren. Er soll nur die Möglichkeiten zeigen, mit denen zu Tabellen mit CSS erstellen kannst.


Beispiel:

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

Nun musst du nur noch die „CSS Tabelle“ in deine Website einbinden. Das machst du ganz einfach, indem du die DIVs einbaust. Nachstehend ein Beispiel dazu, was auf den eben genannten CSS Code aufbaut.


Beispiel:

<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:

Folge einfach diesem Link (öffnet in einem neuen Tab), um das Anzeigebeispiel anzusehen.


Information:

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.

Browser-Test

Das oben genannte CSS Snippet habe ich dazu in folgenden Browsern getestet.

  • Mozilla Firefox 67.0.1
  • Google Chrome 74
  • Microsoft Edge
  • Microsoft Internet Explorer 11

Die genannten Browser zeigen das Snippet dabei richtig an. Ich kann jedoch leider nicht sagen, ob auch in hier nicht genannte Browser dieses CSS Snippet korrekt darstellen.


Anzeige:


Schreibe einen Kommentar