Bootstrap 4 Schnellstart – Tabellen

Tabellen

HTML-Tabellen sehen in der Standardform relativ langweilig aus. Durch Bootstrap kannst du diese optisch aufwerten. Bootstrap bietet dir viele Möglichkeiten, deine Tabellen visuell zu verändern (Die jeweiligen Optionen findest du unten in der Übung.)

Die Basis zur Veränderung des Tabellen-Designs bringt die Klasse table mit. Damit weiß Bootstrap, dass du eine Tabelle designen möchtest.

• Verwendest du zusätzlich table-dark, wird die Tabelle dunkel dargestellt.
• Soll die Tabelle kompakter dargestellt werden, kannst du die Klasse table-sm verwenden.

Tabellenkopf

Mit thead-light und thead-dark, kannst du die Kopfzeilen/-spalten grafisch hervorheben.

Tabellenzeilen

Auf einer einfachen Tabelle verliert man schnell den Überblick. Aus diesem Grund ist es hilfreich, die Tabellenzeilen farblich abwechselnd zu designen. Dies kannst du in Bootstrap mit der Klasse table-striped machen.

<tr class="table-striped">

Rahmen

Mit der Klasse table-bordered erhältst du Rahmen auf allen Seiten.

Möchtest du keine Rahmen darstellen, verwendest du die Klasse table-borderless.

<table class="table-bordered">

Tabellenzeile hervorheben

Eine Zeile kann hervorgehoben werden, wenn die Maus darüber fährt (Hover). Das ist nicht nur ein Hingucker, sondern bietet eine bessere Usability für deine Besucher. Dafür ist die Klasse table-hover zuständig.

<tr class="table-hover">

Tabellenfarben

Zu Farben in Bootstrap kommen wir in den nächsten Modulen noch, allerdings gibt es zwei Möglichkeiten Tabellenzeilen und -zellen einzufärben. Für die Primärfarbe sind das die Klassen table-primary und bg-primary.

<td class="table-primary">

In dieser Übung darfst du selber testen, wie sich die einzelnen Klassen verhalten: