Tabellen mit CSS gestalten

Mit CSS kannst du Tabellen nicht nur funktional, sondern auch optisch ansprechender gestalten. Gut gestaltete Tabellen sind leichter lesbar und helfen dabei, Informationen übersichtlich darzustellen.

In diesem Kapitel lernst du, wie du Tabellen mit Rahmen, Abständen, Farben und Zebra-Streifen übersichtlicher machst.

Nimm den HTML-Code aus dem vorherigen Kapitel und ergänze die folgenden CSS-Styles.

Einfache Tabellenrahmen und Abstände

Zuerst gibst du der Tabelle sichtbare Rahmen und Innenabstände. Dadurch werden die einzelnen Zellen klar voneinander getrennt.

1table {
2  border-collapse: collapse;
3}
4
5table, th, td {
6  border: 1px solid black;
7}
8
9th, td {
10  padding: 1rem;
11}

Mit border erhält die Tabelle sichtbare Linien. Die Eigenschaft padding sorgt für Innenabstand in den Zellen, damit der Inhalt nicht direkt am Rand klebt.

border-collapse: collapse; sorgt dafür, dass benachbarte Rahmen zu einer einzigen Linie zusammengeführt werden. Dadurch wirkt die Tabelle sauberer und übersichtlicher.

Kopfzeile und Zellen moderner gestalten

Im nächsten Schritt gestaltest du die Tabelle etwas moderner. Die Kopfzeile bekommt eine Hintergrundfarbe, der Text wird deutlicher hervorgehoben und die Zellen erhalten gleichmäßige Abstände.

1table {
2  width: 100%;
3  border-spacing: 0;
4
5  th {
6    text-align: left;
7    padding: 12px 16px;
8    background: #a3a2a2;
9    color: white;
10    font-weight: 600;
11  }
12
13  td {
14    padding: 12px 16px;
15    border-bottom: 1px solid #eee;
16  }
17}

width: 100%; sorgt dafür, dass die Tabelle die gesamte verfügbare Breite ihres Containers einnimmt. Mit text-align: left; wird der Text linksbündig ausgerichtet.

Die Eigenschaft background färbt die Kopfzeile ein, während color die Textfarbe bestimmt. border-bottom trennt die Tabellenzeilen optisch voneinander.

border-spacing: 0; entfernt den Abstand zwischen den Tabellenzellen, wenn du getrennte Rahmen verwendest. Dadurch wirkt die Tabelle kompakter.

Zebra-Streifen für bessere Lesbarkeit

Bei längeren Tabellen hilft es, jede zweite Zeile unterschiedlich einzufärben. So lassen sich Informationen schneller erfassen. Der Fachbegriff dafür ist Zebra-Streifen.

1table {
2  width: 100%;
3}
4
5tr:nth-child(even) {
6  background-color: #BDBDBD;
7}

Mit tr:nth-child(even) werden alle geraden Tabellenzeilen ausgewählt. Anschließend kannst du ihnen eine andere Hintergrundfarbe geben.

Diese abwechselnden Farben verbessern die Lesbarkeit, weil einzelne Zeilen leichter voneinander unterschieden werden können. Besonders bei größeren Tabellen ist das sehr hilfreich.

Hinweis zur Lesbarkeit

Achte bei Tabellen darauf, dass Text und Hintergrund gut lesbar bleiben. Achte darauf, dass Farben genügend Kontrast haben, damit Inhalte klar erkennbar sind.