Lädt...

CSS Tabellen

HTML baut das Raster aus Zeilen und Zellen. CSS entscheidet, ob Rahmen sauber wirken, wie breit die Tabelle sitzt, wo Text in der Zelle steht und ob Zeilen leicht zu scannen sind.

Ein CSS-Toolkit für Tabellen

📊 Tabellenstile auf einen Blick

Eigenschaft Alltagsjob
border-collapse Zellrahmen zusammenführen (collapse) oder getrennt halten (separate)
border-spacing Abstand zwischen Zellen bei getrennten Rahmen
width Tabellenbreite (oft 100% in Artikel oder Karte)
padding auf th/td Atemraum in Zellen
text-align / vertical-align Horizontale und vertikale Ausrichtung in der Zelle

Gestalten Sie meist table, th, td und manchmal tr — nicht jede Zelle einzeln — damit das ganze Datenraster konsistent bleibt.

Rahmen, die sich nicht verdoppeln

Ohne Hilfe können benachbarte Zellrahmen dick oder doppelt wirken. border-collapse: collapse führt sie zu einer sauberen Linie zusammen — die Alltagswahl für Datentabellen.

Zusammengeführte Tabellenrahmen

css
CSS Code 
table.data {
width: 100%;
border-collapse: collapse;
}

table.data th,
table.data td {
border: 1px solid #ccc;
padding: 0.5rem 0.75rem;
}

Getrennte Rahmen und Abstand

Wollen Sie sichtbare Lücken zwischen Zellen, nutzen Sie border-collapse: separate und setzen border-spacing. Spacing wird bei Collapse ignoriert.

Getrennte Zellen mit Abstand

css
CSS Code 
table.cards {
border-collapse: separate;
border-spacing: 0.5rem;
}

table.cards td {
border: 1px solid #ddd;
padding: 0.75rem;
}

Breite, Kopfzellen und Ausrichtung

Eine volle Breite liest sich in Artikeln oft besser. Kopfzellen betonen, Text ausrichten und vertical-align nutzen, wenn Zellhöhen variieren.

Kopf- und Zellausrichtung

css
CSS Code 
table.data th {
text-align: left;
background: #f5f5f5;
font-weight: 700;
}

table.data td {
text-align: left;
vertical-align: top;
}

Zebrastreifen und ruhiger Hover

Wechselnde Zeilenhintergründe helfen beim Scannen breiter Tabellen. Ein leichtes :hover auf tr hebt die aktive Zeile ohne Neon-Lärm hervor.

Zebra + Zeilen-Hover

css
CSS Code 
table.data tbody tr:nth-child(even) {
background: #fafafa;
}

table.data tbody tr:hover {
background: #eef5ff;
}

Eine ruhige Datentabellen-Gewohnheit

Rahmen collapsen, Zellen echtes Padding geben, Kopfkontrast maßvoll halten und Zebra/Hover nur nutzen, wenn die Tabelle breit genug Hilfe braucht.

Lesbare Artikeltabelle

css
CSS Code 
article table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}

article th,
article td {
border: 1px solid #e0e0e0;
padding: 0.6rem 0.8rem;
}

Selbst ausprobieren

  1. border-collapse: collapse und leichten Rahmen auf th/td.
  2. Bequemes padding in Zellen.
  3. Kopfzellen linksbündig; vertical-align: top bei mehrzeiligen Zellen.
  4. Gerade Zeilen mit tr:nth-child(even) streifen.
  5. Sanften tr:hover-Hintergrund — dann mit zweiter Tabelle und border-spacing vergleichen.

Häufige Fehler

  • Standard-Separate-Rahmen lassen Linien doppelt und unruhig wirken
  • border-spacing bei border-collapse: collapse setzen (wird ignoriert)
  • Winziges Padding macht dichte Daten schwer lesbar
  • Neon-Hover oder schweres Zebra kämpft mit dem Inhalt
  • Diese Lektion mit list-style-Markern vermischen (vorherige Sitzung)

Kurzfassung

  • border-collapse: collapse ist das ruhige Default für Datentabellen
  • separate + border-spacing für Lücken zwischen Zellen
  • Breite, Padding und Ausrichtung prägen Lesbarkeit
  • Zebra und leichter Hover helfen beim Scannen
  • Struktur in HTML, Optik in CSS

🧠 Testen Sie Ihr Wissen

Bereit zum Start

Testen Sie Ihr Wissen

Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen

❓
8
Fragen
🎯
70%
Zum Bestehen
♾️
∞
Zeit
🔄
∞
Versuche

📝 Anweisungen

  • Lesen Sie jede Frage sorgfältig
  • Wählen Sie die beste Antwort für jede Frage
  • Sie können das Quiz so oft wiederholen, wie Sie möchten
  • Ihr Fortschritt wird oben angezeigt
Thema 32 von 35
Css Tutorial