Tabellen in Bootstrap verwenden - Eine Anleitung

Ich beschäftige mich seit 4 Jahren Frontend-Framework Bootstrap (von Twitter). Um anderen Lesern einen Einstieg in die Nutzung von Bootstrap zu geben, habe ich dieses Tutorial erstellt. Hier werden alle Komponenten anhand von Quelltext-Beispielen erklärt und können für die eigene Verwendung per Copy-and-Paste weiter genutzt werden. In diesem Teil des Tutorial werden Tabellen behandelt und wie man diese mit Bootstrap gestalten kann.

Normale Tabelle mit oder ohne Rahmen

Eine normale Tabelle wird immer durch die CSS-Klasse „table“ im Element definiert. Durch die Angabe weiterer Klassen, können weitere Effekte (z. B. Zebrastreifen oder eine Tabelle mit Hover-Effekt) dargestellt werden.

<br>Normale Tabelle mit Rahmen

→ Tabelle mit Rand

Zebrastreifen-Tabelle

<br>Tabelle mit Zebrastreifen / Hover-Effekt

→ Tabelle mit Zebrastreifen

→ Tabelle mit Hover-Effekt

Kompakte Tabelle

<br>Kompakte Tabelle

→ Kompakte Tabelle

Farbige Tabellenzeilen

<br>Farbige Tabellenzeilen

→ Farbige Tabelle

Unterstütztes Tabellen-Markup

Element Erläuterung
  Tabelle definieren um Daten tabelarisch darzustellen
 
Container für Tabellenkopfzeilen
 
Container für (normale) Tabellenzeilen
 
Container für einen Satz von Tabellenzellen (oder)
    Standard Tabellenzelle
    Tabellenzelle für einen Spaltenüberschrift(innerhalb des)
 
 
Beschreibung / Zusammenfassung der Tabelle (gut geeignet für Screenreader – Stichwort: Benutzbarkeit)

Weitere Informationen:

Nach oben
BootstrapWorld.de nutzt Cookies, um euch die bestmögliche Funktionalität zu bieten.
Details ansehen
OK