Tabellen in Bootstrap ☼ BootstrapWorld.de

Tabellen in Bootstrap - Eine Anleitung zum Ausprobieren und Weiterverwenden

Um Daten strukturiert anzuzeigen, können Tabellen eingesetzt werden. Für Designs sind Tabellen hingegen weniger geeignet. Twitter Bootstrap bietet auch bei Tabellen einige grundlegegende CSS-Klassen, um verschiedene Effekte (z. B. Rahmen) schnell umzusetzen. Die Klassen können kombiniert werden.
Für eine normale Tabelle genügt es die Klasse "table" in das <table>-Element einzufügen. Soll außerdem ein Rahmen um die Tabelle angezeigt werden, muss die CSS-Klasse "table-bordered" hinzugefügt werden.

Beispiele zu Bootstrap Tabellen

<h3>Normale Tabelle</h3>  <table class="table"> <thead> <tr> <th>#</th> <th>Name</th> <th>Ort</th> <th>Alter</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Erik</td> <td>Berlin</td> <td>30</td> </tr> <tr> <td>2</td> <td>Hanna</td> <td>Dresden</td> <td>23</td> </tr> <tr> <td>3</td> <td>Rudi</td> <td>Leipzig</td> <td>45</td> </tr> </tbody> </table> <h3>Normale Tabelle mit Rahmen</h3>  <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>Name</th> <th>Ort</th> <th>Alter</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Erik</td> <td>Berlin</td> <td>30</td> </tr> <tr> <td>2</td> <td>Hanna</td> <td>Dresden</td> <td>23</td> </tr> <tr> <td>3</td> <td>Rudi</td> <td>Leipzig</td> <td>45</td> </tr> </tbody> </table>