Bootstrap Tabelle


Mithilfe von Bootrstrap kannst du Tabellen schnell und einfach formatieren und z. B. farbige Zeilen einfügen bzw. die Tabelle responsive machen. Also für die Ansicht über's Smartphone optimal anzeigen. 

Mit Bootstrap 5 kannst du eine einfache Tabelle erstellen, indem du das 'table'-Klassenattribut in den HTML-Tabellentag einfügst.

Weitere nützliche table-Klassen sind:

  • 'table-hover': Ermöglicht es, dass Einträge hervorgehoben werden, wenn der Mauszeiger darüber bewegt wird
  • 'table-bordered': Fügt einen Rahmen um jede Zelle der Tabelle hinzu
  • 'table-striped': Fügt ein Streifenmuster zu jeder geraden Zeile hinzu
  • 'table-active': Fügt einen Akzent hinzu, der den aktuellen Zeileninhalt hervorhebt
  • 'table-sm': Ermöglicht es, kleinere Tabellenzellen zu erstellen

Um die Farbe einzustellen, kannst du folgende Klassen nutzen:

  • 'table-primary': blauen Akzent
  • 'table-secondary': grrauer Akzent
  • 'table-success': grünen Akzent
  • 'table-danger': roten Akzent
  • 'table-warning': gelben Akzent
  • 'table-info': hellblauen Akzent
  • 'table-light': heller Akzent
  • 'table-dark': dunkler Akzent

 

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Position</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John Doe</td>
      <td>Manager</td>
    </tr>
    <tr class="table-primary">
      <th scope="row">2</th>
      <td>Maria Smith</td>
      <td>Team Lead</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Bob Jones</td>
      <td>Developer</td>
    </tr>
  </tbody>
</table>