Bootstrap Tabellen erklärt

Tabellen

Inhaltsverzeichnis

Tabellen sind ein sehr gute Art und Weise um Informationen strukturiert darzustellen. Sie sollten nicht nur in Verwaltungssystemen oder Anwendungen Verwendung finden, sondern auch auf Webseiten. Vor allem für Suchmaschinen sind Tabellen wertvolle Informationsquellen.

Bootstrap stellt verschiedene CSS-Klassen für das HTML-Tag <table> zur Verfügung, um diese auch auf mobilen Endgeräten sauber und gut lesbar darzustellen.

Standard Tabelle

Standard Tabelle
Abbildung 1: Standard Tabelle aus Twitter Bootstrap

In Abbildung 1 ist die Darstellung der Standard-CSS-Klasse für Tabellen aus Bootstrap zu sehen. Die Spalten Überschriften werden fett dargestellt, mit einem breiten unteren Rand. Die einzelnen Zeilen der Tabelle haben lediglich einen unteren und sehr dünnen Rand.

Um diesen Tabellen-Stil zu nutzen, muss der Tabelle die Klasse “table” gegeben werden. Nun hätte man sich die extra Klasse zwar auch sparen können, Bootstrap nimmt hier allerdings Rücksicht auf möglich Erweiterungen, die im Projekt verwendet werden könnten. Erhält eine Tabelle also die Klasse “table”, ist klar, dass der Entwickler wirklich diesen Basis-Stil haben möchte.

<table class="table">
     <thead> <!-- Erzeugt die Überschrift der Spalten -->
          <tr>
               <th>#</th>
               <th>First Name</th>
               <th>Last Name</th>
               <th>Username</th>
          </tr>
     </thead>
     <tbody> <!-- Erzeugt die Inhaltszeilen der Tabelle -->
          <tr>
               <td>1</td>
               <td>Mark</td>
               <td>Otto</td>
               <td>@mdo</td>
          </tr>
     </tbody>
</table>

Gestreifte Zeilen

Tabelle mit gestreiften Zeilen
Abbildung 2: Tabelle mit gestreiften Zeilen

Um Tabellen übersichtlicher und leichter lesbar zu machen, stellt Bootstrap die CSS-Klasse “table-striped” zur Verfügung. Diese muss zusätzlich zur Klasse “table” hinzugefügt werden, da sie lediglich eine Erweiterung ist. Das gesamte Bootstrap Framework ist auf diese Art und Weise aufgebaut, so dass man sich einige Zeilen CSS-Code spart.

Die Zeilen werden abwechselnd in hellem Grau und weis angezeigt. Die Überschriften der Spalten bleiben identisch.

<table class="table table-striped">
     <!-- Identisch wie im Standard-Design -->
</table>

Eingerahmte Tabellen

Tabelle mit eingerahmten SpaltenAbbildung 3: Tabelle mit eingerahmten Spalten

Wer klassische Tabellen wie in Excel bevorzugt, sollte die CSS-Klasse “table-bordered” zu seiner Tabelle hinzufügen. Sie umrahmt alle einzelnen Zellen und Spalten der Tabelle in grauer Farbe.

<table class="table table-bordered">
     <!-- Identisch wie in Beispiel 1 -->
</table>

Tabellen mit Hover-Effekt über den Zeilen

Tabellen mit Hover Effekt der Zeilen
Abbildung 4: Tabellen mit Hover-Effekt über den Zeilen

Ebenfalls eine Art und Weise, um Tabellen besser lesbar zu machen, bringt die CSS-Klasse “table-hover” mit sich. Hierbei wird eine Zeile mit grauem Hintergrund belegt, sobald der Mauszeiger über dieser ist. Dies kann vor allem bei Tabellen von Vorteil sein, die am Ende, also in der letzten Spalte, einen Link oder einen Button haben. Somit kann der Benutzer sich nur schlecht verklicken und den falschen Datensatz auswählen.

<table class="table table-hover">
     <!-- Identisch wie in Beispiel 1 -->
</table>

Enge Tabellen

Für Tabellen, die sehr viele Spalten haben, kann es passieren, dass der Platz schnell zu gering wird. Mit der CSS-Klasse “table-condensed”, wird das Padding der einzelnen Spalten um die Hälfte verringert, was viel Platzersparnis mit sich bringt. Auf einen Screenshot verzichten wir hier, da man den Unterschied nur sehr schwer erkennen kann.

<table class="table table-condensed">
     <!-- Identisch wie in Beispiel 1 -->
</table>

Zeilenfarbe in Tabellen ändern

Verschiedene Zeilenfarben in Tabelle
Abbildung 5: Tabelle mit verschiedenen Zeilenfarben

In Abbildung 5 sehr gut zu erkennen: Einzelne Zeilen können mit verschiedenen Hintergrundfarben belegt werden. Dies bietet sich beispielsweise bei Datenbank- oder Verwaltungsanwendungen an, um bestimmte Datensätze hervorzuheben. Folgende Farbe-Klassen sind dabei verfügbar:

  • “active” = Graue Farbe
  • “success” = Grüne Farbe
  • “info” = Blaue Farbe
  • “warning” = Gelbe Farbe
  • “danger” = Rote Farbe

Die CSS-Klasse muss hierbei natürlich nicht in das <table>-Tag geschrieben werden, sondern in das Tag, welches die Zeile eröffnet, also <tr>.

<table class="table">
     <!-- Kopfbereich der Tabelle wie gehabt -->
     <tbody>
          <tr class="success"> <!-- Hier wird die Klasse eingefügt -->
               <td>1</td>
               <td>Christoph</td>
               <td>Otto</td>
               <td>@patte87</td>
          </tr>
     </tbody>
</table>

Responsive Tabellen

Tabellen im Responsive Layout
Abbildung 6: Responsive Tabellen mit Scrollbar

Wie man in Abbildung 6 vielleicht etwas schwer erkennen kann, erhält die Tabelle, wenn der Bildschirm zu klein ist, um sie vollständig anzuzeigen, eine Scrollbar im unteren Bereich. Dies wirkt dann wie eine Art Frame und bewirkt, dass Tabellen auch auf mobilen Endgeräten einwandfrei lesbar sind. Diese Klasse sollte bei Webseiten immer Verwendung finden.

Die CSS-Klasse für Responsive Tabellen muss in diesem Fall allerdings nicht der Tabelle zugewiesen werden, sondern einem DIV, das die Tabelle umfasst.

<div class="table-responsive"> <!-- Dieses DIV umfasst die Tabelle -->
     <table class="table">
          <!-- Inhalt der Tabelle wie bereits erwähnt -->
     </table>
</div>

Die verschiedenen Tabellen Klassen, die Bootstrap zur Verfügung stellt, sind selbstverständlich miteinander verknüpfbar. Hier ist ausprobieren angesagt!