Tables

Tables

Bootstrap 5 styles <table> elements automatically when you add the .table class.

Basic table

<table class="table">
  <thead>
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <td>Mary</td>
      <td>Moe</td>
      <td>mary@example.com</td>
    </tr>
  </tbody>
</table>

Table variants

Example with modifiers

<table class="table table-striped table-hover">
  <tbody>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
  </tbody>
</table>

Contextual row colors

You can color individual rows and cells with .table-{color}:

• .table-primary blue
• .table-success green
• .table-danger red
• .table-warning yellow
• .table-info light blue
• .table-active gray

TL;DR

• Add .table to style a table.
• .table-striped adds zebra stripes.
• .table-bordered adds full borders.
• .table-hover highlights rows on hover.
• .table-dark makes a dark table.