CSS Tutorial – Tabellen

Tabellen mit CSS gestalten

Tabellen sind ein zentrales Werkzeug, um strukturierte Daten wie Statistiken, Produktlisten oder
Finanzinformationen übersichtlich darzustellen. Ohne CSS wirken HTML-Tabellen jedoch technisch,
karg und schwer lesbar. Moderne CSS-Eigenschaften machen Tabellen klar, harmonisch und
professionell – und vor allem: sie ermöglichen eine wirklich responsiv nutzbare Darstellung
auf allen Geräten.

In diesem Kapitel lernst du, wie du klassische Tabellen stylst, wie du Abstände, Rahmen, Layouts
und Lesbarkeit optimierst und wie moderne Webdesigns Tabellen auf Smartphones darstellen.
Ziel ist eine Tabelle, die sowohl funktional als auch optisch auf dem aktuellen Stand von 2025 ist.

Rahmen einer Tabelle (border)

Mit der border-Eigenschaft definieren wir sichtbare Linien rund um Tabellen und
Tabellenzellen. Das folgende Beispiel zeigt eine einfache, aber klare Formatierung:

table, th, td {
    border: 1px solid #000;
}

Standardmäßig werden Zellenränder getrennt voneinander angezeigt.
border-collapse: collapse; führt alle Rahmen zu einer sauberen Linie zusammen:

table {
    border-collapse: collapse;
}

Abstände in Tabellen (padding & border-spacing)

Tabellen ohne Innenabstand sehen gequetscht und schlecht lesbar aus.
padding schafft Klarheit und Raum:

th, td {
    padding: 15px;
}

Möchtest du die Abstände zwischen den einzelnen Zellen kontrollieren, kannst du bei
border-collapse: separate; zusätzlich border-spacing verwenden:

table {
    border-spacing: 10px;
}

Breite und Höhe von Tabellen

Standardmäßig passen sich Tabellen an ihren Inhalt an. CSS erlaubt jedoch auch feste Breiten oder
Höhen – beispielsweise, um Layouts zu stabilisieren oder Spalten bewusst zu begrenzen.

table {
    width: 80%;
}
th {
    height: 30px;
}

Steuern des Tabellenlayouts (table-layout)

Der table-layout-Algorithmus steuert, wie Browser Tabellen berechnen. Zwei Varianten:

• auto – Zellenbreiten richten sich am Inhalt aus (Standard).
• fixed – Zellenbreiten basieren auf vorgegebenen Breiten, nicht auf Inhalt.

fixed ist deutlich schneller und verhindert Layoutsprünge – ideal für große Tabellen.

table {
    width: 300px;
    table-layout: fixed;
}

Ausrichten von Text in Tabellenzellen

Horizontale Ausrichtung

th { text-align: left; }

Vertikale Ausrichtung

td {
    vertical-align: middle;
}

Beschriftungen von Tabellen

Tabellenüberschriften (<caption>) lassen sich per CSS nach oben oder unten setzen:

table {
    caption-side: bottom;
}

Die horizontale Ausrichtung steuerst du wie gewohnt mit text-align.

Umgang mit leeren Zellen

Wenn border-collapse: separate; genutzt wird, können leere Zellen ausgeblendet werden:

td {
    empty-cells: hide;
}

Hinweis: Eine Zelle gilt nicht als leer, wenn sie ein   enthält.

Zebra-Streifen für bessere Lesbarkeit

Alternierende Zeilenfarben erhöhen deutlich die Lesbarkeit langer Tabellen – auch „Zebra-Streifen“ genannt.

tbody tr:nth-child(odd) {
    background-color: #f3f3f3;
}

Mit Tailwind ist das sogar noch einfacher:

Moderne Responsive Tabellen (2025)

Tabellen sind von Natur aus nicht responsiv. Moderne Websites verwenden daher mehrere Techniken,
um Tabellen auf kleinen Bildschirmen lesbar zu machen. Es gibt heute 3 etablierte Strategien:

1. Horizontal scrollbare Tabellen – zuverlässig und barrierearm.
2. Mobile Cards – Tabellen werden auf Smartphones in übersichtliche Karten transformiert.
3. Tabellen per Grid/Flex ersetzen – maximal flexibel, sehr modern.

1. Scrollbare Tabellen (die Standardlösung)

2. Mobile Card-Ansicht (besonders UI-freundlich)

Viele Webdesigns wandeln Tabellen auf Smartphones in Karten um, da diese viel besser lesbar sind.
Das geschieht über Media Queries:

@media (max-width: 640px) {
    table { display: none; }
    .table-card { display: block; }
}

3. Tabellen durch Grid ersetzen (moderne Admin-Oberflächen)

Viele moderne Dashboards nutzen keine Tabellen mehr, sondern CSS Grid – da
Spalten einfacher reorganisiert und Daten dynamischer dargestellt werden können.

.grid-table {
    display: grid;
    grid-template-columns: 2fr 3fr 1fr;
    border: 1px solid #ccc;
}
.grid-table > div {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

Best Practices für Tabellen (2025)

• Nutze border-collapse: collapse; für klare & moderne Tabellen.
• Vermeide 1-Pixel-Schriftgrößen und zu enge Tabellen – sie sind schlecht lesbar.
• Arbeite mit Zebra-Streifen für große Datenmengen.
• Wickle Tabellen mobil in ein overflow-x-auto-Element.
• Nutze Sticky Header für mehr Übersichtlichkeit.
• Für mobile Geräte: Card-Ansicht oder horizontales Scrollen.
• Nutze Grid statt Tabellen, wenn du mehr Kontrolle über Layout brauchst.