Gestalte HTML-Tabellenrahmen mit CSS: border-collapse, border-spacing, Linien pro Zelle, Zebrastreifen und abgerundete Ecken. Live-Playground mit CSS zum Kopieren.
Sichtbare Linien bekommt eine Tabelle, wenn du den th- und td-Zellen einen Rahmen gibst und der Tabelle dann border-collapse: collapse hinzufügst, damit benachbarte Zellen sich eine Linie teilen, statt zwei zu zeichnen. Für Abstände zwischen Zellen nutzt du border-collapse: separate mit border-spacing. Abgerundete Ecken brauchen das separate Modell, weil zusammengefasste Rahmen border-radius ignorieren.
Die Rahmeneigenschaften für Tabellen auf einen Blick
Ziel
CSS
Wohin damit
Einfache gemeinsame Rasterlinien
border-collapse: collapse
Linien um jede Zelle
border: 1px solid #ccc
th, td
Abstände zwischen Zellen
border-spacing: 4px
table (nur separates Modell)
Gestreifte Zeilen
tbody tr:nth-child(even) { background: #f5f5f5 }
Abgerundete äußere Ecken
border-radius + border-collapse: separate
table und Eckzellen
Nur Linien zwischen Zeilen
border-bottom: 1px solid #ddd
th, td
Tabellen haben eigene Rahmenregeln, getrennt von gewöhnlichen Boxen, daher sieht CSS, das bei einem div funktioniert, bei einer Tabelle oft falsch aus. Wechsle im Playground zwischen dem zusammengefassten und dem getrennten Modell, ändere Linienstärke, Abstand und Eckenradius und kopiere dann genau das CSS, das dabei entsteht.
Wähle im Playground das Modell collapse oder separate und sieh zu, wie die doppelten Linien verschmelzen oder sich trennen.
Lege fest, welche Linien gezeichnet werden: ein volles Raster, nur Zeilen oder nur ein äußerer Rahmen.
Schalte Zebrastreifen oder runde Ecken ein; das Abrunden stellt die Tabelle automatisch auf das separate Modell um.
Kopiere das erzeugte CSS oder starte mit einem der bearbeitbaren Beispiele weiter unten.
Setze Rahmen auf die Zellen, nicht nur auf das table-Element. Ein Rahmen nur an der Tabelle zeichnet einen äußeren Rahmen und innen nichts.
Nutze border-spacing: 0 mit dem separaten Modell, wenn du runde Ecken, aber keine sichtbaren Lücken willst.
Streife nur die Zeilen in tbody, damit die Kopfzeile ihren eigenen Hintergrund behält.
Halte Linienfarben hell und überlass das Trennen größtenteils dem Padding; schwere Raster machen Zahlen schwerer erfassbar.
Pack breite Tabellen in einen Container mit overflow-x: auto, damit Handys die Tabelle scrollen statt der ganzen Seite.
Häufige Fragen
Warum zeigt meine Tabelle doppelte Rahmen?
Der Anfangswert von border-collapse ist separate, daher zeichnet jede Zelle ihren eigenen Rahmen, und zwei Nachbarn liegen nebeneinander. Setze border-collapse: collapse auf die Tabelle, dann verschmelzen angrenzende Rahmen zu einer Linie.
Warum funktioniert border-radius bei meiner Tabelle nicht?
Im zusammengefassten Rahmenmodell werden runde Ecken ignoriert. Stell die Tabelle auf border-collapse: separate um, setze border-spacing: 0 und runde dann die äußeren Eckzellen ab oder pack die Tabelle in ein div mit border-radius und overflow: hidden.
Ist das HTML-Attribut border an Tabellen noch erlaubt?
Der HTML-Standard führt das border-Attribut an table als veraltet und empfiehlt stattdessen CSS. Browser zeichnen es für alte Seiten weiterhin, aber neuer Code sollte Rahmen in einem Stylesheet setzen, damit eine Regel jede Tabelle steuert.
Welche Werte nimmt border-spacing?
Eine Länge setzt den Abstand horizontal und vertikal. Zwei Längen setzen zuerst den horizontalen Abstand zwischen Spalten und dann den vertikalen zwischen Zeilen, zum Beispiel border-spacing: 8px 4px. Bei einer zusammengefassten Tabelle hat es keine Wirkung.
Wie gebe ich nur einer Spalte einen Rahmen?
Sprich die Zellen dieser Spalte mit einem Selektor wie td:nth-child(2), th:nth-child(2) an und gib ihnen einen linken oder rechten Rahmen. Zellen direkt zu stylen funktioniert in beiden Rahmenmodellen gleich.
Zwei Rahmenmodelle
Im getrennten Modell ist jede Zelle eine eigene Box mit eigenem Rahmen, und border-spacing setzt den Abstand zwischen diesen Boxen. Es ist der Standard, weshalb eine nackte Tabelle mit Zellenrahmen doppelt aussieht.
Im zusammengefassten Modell löst der Browser jede gemeinsame Kante zu einer einzigen Linie auf. Das wollen die meisten Datentabellen, allerdings verlierst du dafür border-spacing und runde Ecken.
Gut lesbare Datentabellen
Horizontale Linien zwischen Zeilen führen das Auge besser an einer Zahlenreihe entlang als ein dichtes Raster. Richte Zahlenspalten rechtsbündig aus, halte eine klare Kopfzeile mit th-Elementen und ergänze eine caption, damit die Tabelle für Screenreader-Nutzer einen Namen hat.
Zebrastreifen helfen bei langen Tabellen mit vielen Spalten. Prüfe, dass die Streifenfarbe noch genug Kontrast für den Text darauf lässt.
Referenz der Rahmeneigenschaften für Tabellen
Eigenschaften, die ändern, wie Tabellenlinien gezeichnet werden
Eigenschaft
Werte
Anfangswert
Hinweise
collapse, separate
Wird an der Tabelle gesetzt. Collapse verschmilzt gemeinsame Kanten.
eine oder zwei Längen
Erst horizontaler, dann vertikaler Abstand. Wird bei collapse ignoriert.
Stärke, Stil, Farbe
Meist an th und td gesetzt.
Wird im zusammengefassten Modell ignoriert.
Bearbeitbare Beispiele für Tabellenrahmen
Zusammengefasstes Raster mit Kopfzeile
Die klassische Datentabelle: eine Linie zwischen allen Zellen und ein getönter Kopf.
Nur Zeilen, mit Zebrastreifen
Keine senkrechten Linien. Ein unterer Rahmen an jeder Zelle plus eine Tönung jeder zweiten Zeile machen lange Zeilen leicht verfolgbar.
Abgerundete Tabellenecken
Das separate Modell mit Abstand null, Rahmen rechts und unten an jeder Zelle und abgerundeten äußeren Ecken.
Das veraltete border-Attribut neben der CSS-Version
Beide Tabellen sehen gleich aus. Die zweite hält das Styling im CSS, wie es der HTML-Standard verlangt.
Playground für Tabellenrahmen
Rahmenmodell
Zu zeichnende Linien
Volles Raster
Nur Zeilen
Nur äußerer Rahmen
Linienstärke: {n}px
Zellenabstand: {n}px
Eckenradius: {n}px
Zebrastreifen
Linienfarbe
Abstand und Abrundung funktionieren nur im separaten Modell.