Table Variants in Bootstrap

Bootstrap offers several table variants to enhance the visual appeal and readability of tables. These variants include striped rows, bordered tables, and hover effects. Each variant modifies the appearance of the table in specific ways to help differentiate rows, add borders, or highlight rows on hover.

1. Striped Rows

The striped rows variant adds alternating background colors to table rows, making it easier to read and distinguish between rows.

Class: .table-striped

Usage:

Add the .table-striped class to your table element to apply alternating row colors.

Example:

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Michael</td>
      <td>Johnson</td>
      <td>@michaeljohnson</td>
    </tr>
  </tbody>
</table>

• .table-striped: Applies alternating background colors (light grey by default) to the table rows.

2. Bordered Table

The bordered table variant adds borders around all the table cells, making the table more structured and visually distinct.

Class: .table-bordered

Usage:

Add the .table-bordered class to your table element to apply borders to the table cells.

Example:

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Michael</td>
      <td>Johnson</td>
      <td>@michaeljohnson</td>
    </tr>
  </tbody>
</table>

• .table-bordered: Adds borders to all sides of each table cell.

3. Hover Rows

The hover rows variant adds a background color to rows when they are hovered over with the mouse pointer, providing a visual cue that the row is interactive.

Class: .table-hover

Usage:

Add the .table-hover class to your table element to apply a hover effect to the rows.

Example:

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Michael</td>
      <td>Johnson</td>
      <td>@michaeljohnson</td>
    </tr>
  </tbody>
</table>

• .table-hover: Adds a hover effect to the table rows, changing the background color when the row is hovered over.

Combining Variants

You can combine multiple table variants to achieve a customized table appearance. For example, you can create a striped, bordered, and hover-enabled table by applying multiple classes.

Example:

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Michael</td>
      <td>Johnson</td>
      <td>@michaeljohnson</td>
    </tr>
  </tbody>
</table>

• Combining: Applying .table-striped, .table-bordered, and .table-hover together results in a table with alternating row colors, borders around all cells, and a hover effect.

Summary of Table Variants in Bootstrap

• Striped Rows: Use .table-striped to add alternating background colors to rows for better readability.
• Bordered Table: Use .table-bordered to add borders around all table cells for a more structured look.
• Hover Rows: Use .table-hover to highlight rows on hover, providing a visual cue of interactivity.