Bootstrap Tables

Bootstrap 5 Tables

Bootstrap 5 provides elegant and responsive styling for HTML tables. This section covers the essential classes for creating various table styles.

Basic Table Styling

To apply basic Bootstrap styling—light padding and horizontal dividers—add the .table class to any <table> element.

Example of a basic table:

<!-- Visual representation of the table output -->
<div style="font-family: sans-serif; margin-bottom: 1rem;">
  <table style="width: 100%; border-collapse: collapse;">
    <thead>
      <tr style="border-bottom: 1px solid #dee2e6;">
        <th style="padding: 0.5rem; text-align: left;">Firstname</th>
        <th style="padding: 0.5rem; text-align: left;">Lastname</th>
        <th style="padding: 0.5rem; text-align: left;">Email</th>
      </tr>
    </thead>
    <tbody>
      <tr style="border-bottom: 1px solid #dee2e6;">
        <td style="padding: 0.5rem;">John</td>
        <td style="padding: 0.5rem;">Doe</td>
        <td style="padding: 0.5rem;">john@example.com</td>
      </tr>
      <tr style="border-bottom: 1px solid #dee2e6;">
        <td style="padding: 0.5rem;">Mary</td>
        <td style="padding: 0.5rem;">Moe</td>
        <td style="padding: 0.5rem;">mary@example.com</td>
      </tr>
      <tr>
        <td style="padding: 0.5rem;">July</td>
        <td style="padding: 0.5rem;">Dooley</td>
        <td style="padding: 0.5rem;">july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- End visual representation -->

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Firstname</th>
      <th scope="col">Lastname</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

<!-- Best Practice: Always use `<thead>` and `<tbody>` for proper table structure. Use `scope="col"` for header cells (`<th>`) and `scope="row"` for row header cells to improve accessibility. -->

Application Scenario: Basic tables are perfect for displaying structured data like user lists, product specifications, or simple reports.

Striped Rows

Add zebra-striping to table rows by applying the .table-striped class. This improves readability for longer tables.

<table class="table table-striped">
  <thead>
    <tr><th scope="col">#</th><th scope="col">Name</th><th scope="col">Department</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>Alice</td><td>Engineering</td></tr>
    <tr><th scope="row">2</th><td>Bob</td><td>Marketing</td></tr>
    <tr><th scope="row">3</th><td>Carol</td><td>Sales</td></tr>
  </tbody>
</table>

For striped columns, use .table-striped-columns.

Bordered Table

The .table-bordered class adds borders on all sides of the table and cells, creating a more defined grid.

<table class="table table-bordered">
  <thead>
    <tr><th scope="col">ID</th><th scope="col">Product</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">P101</th><td>Widget A</td><td>$19.99</td></tr>
    <tr><th scope="row">P102</th><td>Gadget B</td><td>$29.99</td></tr>
  </tbody>
</table>

To remove borders, use .table-borderless.

Hover Rows

Enable a hover state on table rows within a <tbody> by adding the .table-hover class. This provides visual feedback as the user mouses over rows.

<table class="table table-hover">
  <thead>
    <tr><th scope="col">Task ID</th><th scope="col">Description</th><th scope="col">Status</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">T001</th><td>Design new logo</td><td>In Progress</td></tr>
    <tr><th scope="row">T002</th><td>Develop homepage</td><td>Pending</td></tr>
    <tr><th scope="row">T003</th><td>User testing</td><td>Completed</td></tr>
  </tbody>
</table>

Small Table (Condensed)

The .table-sm class (replacing older .table-condensed) makes tables more compact by cutting cell padding in half. This is useful for information-dense tables.

<table class="table table-sm table-bordered">
  <thead>
    <tr><th scope="col">#</th><th scope="col">Item</th><th scope="col">Quantity</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">1</th><td>Apples</td><td>10</td></tr>
    <tr><th scope="row">2</th><td>Bananas</td><td>5</td></tr>
  </tbody>
</table>

Contextual Classes (Row and Cell Colors)

Contextual classes can be used to color entire table rows (<tr>) or individual cells (<td> or <th>). These classes convey semantic meaning.

The available contextual classes for tables are .table-active, .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark.

<table class="table">
  <thead>
    <tr><th scope="col">Class</th><th scope="col">Description</th><th scope="col">Example Data</th></tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <th scope="row">.table-primary</th>
      <td>Indicates a primary action or information</td>
      <td>New User Registered</td>
    </tr>
    <tr class="table-success">
      <th scope="row">.table-success</th>
      <td>Indicates a successful or positive action</td>
      <td>Payment Received</td>
    </tr>
    <tr>
      <th scope="row">Normal</th>
      <td>Standard row</td>
      <td class="table-warning">Warning: Low stock</td>
    </tr>
    <tr class="table-danger">
      <th scope="row">.table-danger</th>
      <td>Indicates a dangerous or potentially negative action</td>
      <td>Account Overdue</td>
    </tr>
  </tbody>
</table>

<!-- Tip: When using dark background contextual classes like `.table-dark`, the text color automatically adjusts for contrast. For other custom dark backgrounds, you might need to add `.text-white` or similar utility. -->

Class	Description
.table-active	Applies a hover-like or active selection color to the row or cell.
.table-primary	Blue: Indicates a neutral informative change or primary highlight.
.table-secondary	Grey: Indicates a less important or secondary highlight.
.table-success	Green: Indicates a successful or positive action.
.table-danger	Red: Indicates a dangerous or potentially negative action.
.table-warning	Yellow: Indicates a warning that might need attention.
.table-info	Teal: Indicates a neutral informative change or action.
.table-light	Light grey: A light background color.
.table-dark	Dark grey/black: A dark background color (text becomes light).

Responsive Tables

For tables that might be too wide for smaller screens, wrap the .table with a div having the class .table-responsive. This will make the table horizontally scrollable on small devices.

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Header 1</th>
        <th scope="col">Header 2</th>
        <th scope="col">Header 3</th>
        <th scope="col">Header 4</th>
        <th scope="col">Header 5</th>
        <th scope="col">Header 6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </table>
</div>

<!-- Tip: You can also use responsive variants like `.table-responsive-sm`, `.table-responsive-md`, etc., to make the table scrollable only below a certain breakpoint. -->

Application Scenario: Responsive tables are crucial for data-heavy dashboards, admin panels, and any situation where wide tables need to be accessible on mobile devices.

Complete Bootstrap Table Reference

For a comprehensive overview of all table features, including captions, dark mode, and vertical alignment, visit the official Bootstrap 5 documentation: https://getbootstrap.com/docs/5.3/content/tables/