0
0
Bootsrapmarkup~5 mins

Striped and hover tables in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Striped and hover tables make it easier to read rows by adding background colors and highlight effects. This helps users follow data across the table without losing their place.

When showing a list of items like products or users to improve readability.
When you want to highlight the row under the mouse pointer for better focus.
When displaying financial or statistical data where row clarity is important.
When you want a clean and modern look for your tables without extra CSS.
When you want to improve accessibility by visually separating rows.
Syntax
Bootsrap
<table class="table table-striped table-hover">
  <!-- table content -->
</table>

Use table-striped to add alternating background colors to rows.

Use table-hover to highlight a row when the mouse moves over it.

Examples
This table has alternating row colors but no hover effect.
Bootsrap
<table class="table table-striped">
  <!-- striped rows only -->
</table>
This table highlights rows on mouse hover but has no stripes.
Bootsrap
<table class="table table-hover">
  <!-- hover effect only -->
</table>
This table combines both striped rows and hover highlight.
Bootsrap
<table class="table table-striped table-hover">
  <!-- both striped and hover -->
</table>
Sample Program

This example shows a table with both striped rows and hover highlight using Bootstrap classes. The table is accessible with proper scope attributes and a descriptive aria-label. The container adds some spacing around the table.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Striped and Hover Table Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container my-4">
    <h1>Striped and Hover Table</h1>
    <table class="table table-striped table-hover" aria-label="Sample striped and hover table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Name</th>
          <th scope="col">Age</th>
          <th scope="col">City</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Alice</td>
          <td>28</td>
          <td>New York</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Bob</td>
          <td>34</td>
          <td>Chicago</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Carol</td>
          <td>22</td>
          <td>San Francisco</td>
        </tr>
      </tbody>
    </table>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always use <thead> and <tbody> for better structure and accessibility.

Use scope="col" on header cells and scope="row" on row headers for screen readers.

Bootstrap's table classes work well on all screen sizes and are responsive by default.

Summary

Striped tables add alternating background colors to rows for easier reading.

Hover tables highlight the row under the mouse pointer for focus.

Combine table-striped and table-hover classes on a <table> to get both effects easily.