Bootstrap5-Tabellen

Die Tabellenkomponente von Bootstrap 5 bietet eine Reihe von Funktionen und Stilen, wodurch Tabellen einfacher zu erstellen, responsiv und ansprechend werden.

Wir können ganz einfach Tabellen mit verschiedenen Stilen, Sortierfunktion, Paginierung und responsiven Layouts erstellen.

Bootstrap5 Grundlegende Tabellen

In Bootstrap 5 ist die grundlegende Struktur zum Erstellen einer Tabelle sehr einfach; Sie müssen nur Standard-HTML<table>Elemente verwenden undtabledie Klasse hinzufügen.

Bootstrap5 verwendet die.table-Klasse, um den grundlegenden Tabellenstil festzulegen, wie unten gezeigt:

Beispiel

<table class="table"> <thead> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Selbst ausprobieren »

Gestreifte Tabelle

Durch Hinzufügen der.table-striped-Klasse sehen Sie<tbody>Streifen in den darin enthaltenen Zeilen, wie im folgenden Beispiel gezeigt:

Beispiel

<table class="table table-striped"> <thead> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Selbst ausprobieren »

Tabelle mit Rand

.table-borderedDie Klasse kann der Tabelle Rahmen hinzufügen.

Beispiel

<table class="table table-bordered"> <thead> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Selbst ausprobieren »

Tabelle mit Hover-Zustand

.table-hoverDie Klasse kann jeder Zeile der Tabelle einen Maus-Hover-Effekt (grauer Hintergrund) hinzufügen:

Beispiel

<table class="table table-hover"> <thead> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Selbst ausprobieren »

Dunkle Tabelle

.table-darkDie Klasse kann der Tabelle einen schwarzen Hintergrund hinzufügen:

Beispiel

<table class="table table-dark"> <thead> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Selbst ausprobieren »

Dunkle gestreifte Tabelle

Durch Kombinieren der.table-dark- und.table-striped-Klassen kann eine schwarze gestreifte Tabelle erstellt werden:

Beispiel

<table class="table table-dark table-striped"> <thead> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Selbst ausprobieren »

Hover-Effekt - Dunkle Tabelle

Durch Kombinieren der.table-dark- und.table-hover-Klassen kann der Maus-Hover-Effekt auf einer dunklen Tabelle festgelegt werden:

Beispiel

<table class="table table-dark table-hover"> <thead> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Selbst ausprobieren »

Randlose Tabelle

.table-borderlessDie Klasse kann eine Tabelle ohne Rahmen erstellen:

Beispiel

<table class="table table-borderless"> <thead> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Selbst ausprobieren »

Kontextbezogene Farbklassen

Durch kontextbezogene Farbklassen können Sie Farben für Tabellenzeilen oder -zellen festlegen:

Beispiel

<table class="table"> <thead> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>Standard</td> <td>Standardmäßig aktiviert</td> <td>[email protected]</td> </tr> <tr class="table-primary"> <td>Primär</td> <td>Joe</td> <td>[email protected]</td> </tr> <tr class="table-success"> <td>Erfolg</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr class="table-danger"> <td>Gefahr</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr class="table-info"> <td>Info</td> <td>Dooley</td> <td>[email protected]</td> </tr> <tr class="table-warning"> <td>Warnung</td> <td>Refs</td> <td>[email protected]</td> </tr> <tr class="table-active"> <td>Aktiv</td> <td>Activeson</td> <td>[email protected]</td> </tr> <tr class="table-secondary"> <td>Sekundär</td> <td>Secondson</td> <td>[email protected]</td> </tr> <tr class="table-light"> <td>Hell</td> <td>Angie</td> <td>[email protected]</td> </tr> <tr class="table-dark text-dark"> <td>Dunkel</td> <td>Bo</td> <td>[email protected]</td> </tr> </tbody> </table>

Selbst ausprobieren »

Die folgende Tabelle listet die Beschreibungen der Tabellenfarbklassen auf:

Klassenname Beschreibung
.table-primary Blau: Kennzeichnet eine wichtige Operation
.table-success Grün: Kennzeichnet eine Operation, die ausgeführt werden darf
.table-danger Rot: Kennzeichnet eine gefährliche Operation
.table-info Hellblau: Zeigt an, dass sich der Inhalt geändert hat
.table-warning Orange: Zeigt einen Vorgang an, der Aufmerksamkeit erfordert
.table-active Grau: Wird für den Maus-Hover-Effekt verwendet
.table-secondary Grau: Zeigt an, dass der Inhalt nicht sehr wichtig ist
.table-light Hellgrau: Kann der Hintergrund von Tabellenzeilen sein
.table-dark Dunkelgrau: Kann der Hintergrund von Tabellenzeilen sein

Farben für Tabellenkopf

Wir können auch die Farbe des Tabellenkopfs festlegen, zum Beispiel wird mit der Klasse.table-darkein schwarzer Hintergrund für den Tabellenkopf hinzugefügt, und mit der Klasse.table-lightwird ein grauer Hintergrund für den Tabellenkopf hinzugefügt:

Beispiel

<table class="table"> <thead class="table-dark"> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table> <table class="table"> <thead class="table-light"> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Selbst ausprobieren »

Kleine Tabelle

.table-smDie Klasse wird verwendet, um eine kleinere Tabelle durch Reduzierung des Innenabstands zu erstellen:

Beispiel

<table class="table table-bordered table-sm"> <thead> <tr> <th>Vorname</th> <th>Nachname</th> <th>E-Mail</th> </tr> </thead> <tbody> <tr> <td>John</td> <td>Doe</td> <td>[email protected]</td> </tr> <tr> <td>Mary</td> <td>Moe</td> <td>[email protected]</td> </tr> <tr> <td>July</td> <td>Dooley</td> <td>[email protected]</td> </tr> </tbody> </table>

Selbst ausprobieren »

Responsive Tabellen

.table-responsiveDie Klasse wird verwendet, um responsive Tabellen zu erstellen: Wenn die Bildschirmbreite weniger als 992px beträgt, wird eine horizontale Bildlaufleiste erstellt; wenn die Viewport-Breite größer als 992px ist, wird ein anderer Effekt angezeigt (keine Bildlaufleiste):

Beispiel

<div class="table-responsive"> <table class="table"> <thead> <tr> <th>#</th> <th>Vorname</th> <th>Nachname</th> <th>Alter</th> <th>Stadt</th> <th>Land</th> <th>Geschlecht</th> <th>Beispiel</th> <th>Beispiel</th> <th>Beispiel</th> <th>Beispiel</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Anna</td> <td>Pitt</td> <td>35</td> <td>New York</td> <td>USA</td> <td>Weiblich</td> <td>Ja</td> <td>Ja</td> <td>Ja</td> <td>Ja</td> </tr> </tbody> </table> </div>

Selbst ausprobieren »

Sie können die folgenden Klassen verwenden, um Bildlaufleisten bei bestimmten Bildschirmbreiten anzuzeigen:

Klassenname Bildschirmbreite
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

Beispiel

<div class="table-responsive-sm"> <table class="table"> ... </table> </div>

Selbst ausprobieren »
Weitere Erweiterungen