Bootstrap - Tabellen: Ein freundlicher Leitfaden für Anfänger

Hallo da draußen, zukünftige Webentwickler! Heute tauchen wir ein in die wundervolle Welt der Bootstrap Tabellen. Machen Sie sich keine Sorgen, wenn Sie noch nie kodiert haben – ich werde Ihr freundlicher Guide auf dieser Reise sein, und wir gehen schrittweise vor. Am Ende dieses Tutorials werden Sie wunderschöne, responsive Tabellen wie ein Profi erstellen können!

Was sind Bootstrap Tabellen?

Bevor wir loslegen, sprechen wir darüber, was Bootstrap Tabellen sind. Stellen Sie sich vor, Sie organisieren Ihre Lieblingsbücher auf einem Bücherregal. Bootstrap Tabellen sind wie dieses Bücherregal, aber für Ihre Webseite! Sie helfen Ihnen, Informationen auf eine ordentliche, organisierte Weise zu präsentieren, die für Ihre Besucher leicht lesbar und verständlich ist.

Einfache Tabelle

Lassen Sie mit den Grundlagen beginnen. So erstellen Sie eine einfache Bootstrap Tabelle:

<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Alter</th>
<th>Stadt</th>
</tr>
</thead>
<tbody>
<tr>
<td>Max Mustermann</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Anna Schmitt</td>
<td>30</td>
<td>London</td>
</tr>
</tbody>
</table>

Dieser Code erstellt eine Tabelle mit drei Spalten: Name, Alter und Stadt. Der <thead>-Bereich definiert die Tabellenköpfe, und das <tbody> enthält die tatsächlichen Daten. Die class="table" verleiht ihr das Bootstrap-Zauber!

Tabellenvarianten

Bootstrap bietet verschiedene Stile für Ihre Tabellen. Es ist wie das Auswählen verschiedener Outfits für Ihre Daten! Hier sind einige Varianten:

<table class="table table-primary">...</table>
<table class="table table-secondary">...</table>
<table class="table table-success">...</table>
<table class="table table-danger">...</table>
<table class="table table-warning">...</table>
<table class="table table-info">...</table>
<table class="table table-light">...</table>
<table class="table table-dark">...</table>

Fügen Sie diese Klassen einfach zu Ihrem <table>-Tag hinzu, um das allgemeine Aussehen Ihrer Tabelle zu ändern. So einfach ist das!

Betonte Tabellen

Möchten Sie bestimmte Zeilen oder Zellen hervorheben? Bootstrap hat für alles eine Lösung:

<table class="table">
<thead>
<tr>
<th>Spalte 1</th>
<th>Spalte 2</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<td>Aktive Zeile</td>
<td>Steht heraus</td>
</tr>
<tr>
<td>Reguläre Zeile</td>
<td class="table-primary">Accentierte Zelle</td>
</tr>
</tbody>
</table>

Die table-active-Klasse hebt eine ganze Zeile hervor, während Klassen wie table-primary auf individuelle Zellen angewendet werden können.

Gestreifte Zeilen und Spalten

Erinnern Sie sich an die Zebra gestreiften Notizbücher, die Sie in der Schule hatten? Sie können dasselbe mit Ihren Tabellen machen!

Für gestreifte Zeilen:

<table class="table table-striped">
...
</table>

Und für gestreifte Spalten:

<table class="table table-striped-columns">
...
</table>

Hoverbare Zeilen

Möchten Sie Ihre Tabelle interaktiv gestalten? Machen Sie die Zeilen leuchtend, wenn Sie darüber hinwegfahren:

<table class="table table-hover">
...
</table>

Es ist wie Magie – probieren Sie es aus!

Gerahmte und randlose Tabellen

Sie können Rand zu Ihrer Tabelle hinzufügen:

<table class="table table-bordered">
...
</table>

Oder sie vollständig entfernen:

<table class="table table-borderless">
...
</table>

Kleine Tabellen

Für ein kompakteres Aussehen verwenden Sie die table-sm-Klasse:

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

Perfekt für den Fall, dass Sie viele Daten in einem kleinen Raum unterbringen müssen!

Tabellengruppen-Trenner

Möchten Sie Ihre Daten gruppieren? Verwenden Sie die table-group-divider-Klasse:

<table class="table">
<thead>
<tr>
<th>Kopf 1</th>
<th>Kopf 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Daten 1</td>
<td>Daten 2</td>
</tr>
</tbody>
<tbody class="table-group-divider">
<tr>
<td>Daten 3</td>
<td>Daten 4</td>
</tr>
</tbody>
</table>

Dies fügt eine sichtbare Trennlinie zwischen Ihren Tabellenkörperteilen hinzu.

Vertikale Ausrichtung

Sie können steuern, wie Ihr Inhalt vertikal in den Zellen ausgerichtet wird:

<table class="table table-sm table-bordered">
<tbody>
<tr class="align-bottom">
<td>Diese Zelle und ihre Nachbarn sind unten ausgerichtet</td>
<td>Unten</td>
<td class="align-top">Diese Zelle ist oben ausgerichtet</td>
</tr>
</tbody>
</table>

Verwenden Sie align-middle für mittige Ausrichtung und align-top für obere Ausrichtung.

Responsive Tabellen

Machen Sie Ihre Tabellen auf allen Geräten gut aussehend mit der table-responsive-Klasse:

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

Dies ermöglicht es Ihrer Tabelle, horizontal auf kleineren Bildschirmen zu scrollen. Es ist wie das Verleihen von Superkräften Ihrer Tabelle, um sich an jede Bildschirmgröße anzupassen!

Verschachtelung

Sie können Tabellen sogar in Tabellen platzieren! Hier ist, wie man das macht:

<table class="table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Details</th>
</tr>
</thead>
<tbody>
<tr>
<td>Elternzeile</td>
<td>
<table class="table table-sm">
<tr>
<td Verschachtelte Zeile 1</td>
</tr>
<tr>
<td Verschachtelte Zeile 2</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>

Es ist wie russische Puppen, aber mit Tabellen!

Anatomie einer Tabelle

Lassen Sie uns die Teile einer Tabelle auseinanderhalten:

Tabellenkopf

<table class="table">
<thead>
<tr>
<th>Kopf 1</th>
<th>Kopf 2</th>
</tr>
</thead>
...
</table>

Das <thead> enthält Ihre Spaltenköpfe.

Tabellenfuß

<table class="table">
...
<tfoot>
<tr>
<td>Fuß 1</td>
<td>Fuß 2</td>
</tr>
</tfoot>
</table>

Verwenden Sie <tfoot> für Tabellenfüße, ideal für Zusammenfassungen oder Summen.

Bildunterschrift

Fügen Sie eine Überschrift zu Ihrer Tabelle hinzu mit <caption>:

<table class="table">
<caption>Benutzerliste</caption>
...
</table>

Es ist wie das Verleihen eines Namensschildes Ihrer Tabelle!

Schlussfolgerung

Und da haben Sie es, Leute! Sie haben gerade gelernt, wie man Tabellen mit Bootstrap erstellt und gestaltet. Denken Sie daran, Übung macht den Meister, also fürchten Sie sich nicht, verschiedene Kombinationen dieser Klassen auszuprobieren. Bevor Sie es wissen, werden Sie Tabellen erstellen, die nicht nur Daten effektiv organisieren, sondern auch großartig aussehen!

Frohes Coden und möge Ihre Tabellen stets schön bootstrapt sein!

Credits: Image by storyset