Tabellen mit Bootstrap

Beispiel einer einfachen Tabelle mit Bootstrap:

Name	Alter	Stadt
Max Mustermann	30	Musterstadt
Anna Schmidt	25	Beispielstadt

HTML-Code:

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Name</th>
      <th>Alter</th>
      <th>Stadt</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Max Mustermann</td><td>30</td><td>Musterstadt</td></tr>
    <tr><td>Anna Schmidt</td><td>25</td><td>Beispielstadt</td></tr>
  </tbody>
</table>

Einfache HTML-Tabelle ohne Bootstrap

Auch ohne Framework lassen sich Tabellen mit HTML und etwas CSS ansprechend gestalten:

Name	Alter	Stadt
Sabine Weber	28	Hamburg
Karl Fischer	40	Leipzig

<table class="simple-table">
  <thead>
    <tr><th>Name</th><th>Alter</th><th>Stadt</th></tr>
  </thead>
  <tbody>
    <tr><td>Sabine Weber</td><td>28</td><td>Hamburg</td></tr>
    <tr><td>Karl Fischer</td><td>40</td><td>Leipzig</td></tr>
  </tbody>
</table>

Responsive Tabelle

Mit Bootstrap kannst du Tabellen responsiv gestalten – sie passen sich also dem Bildschirm an.

HTML-Code:

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

Vorschau der Tabelle: