Bootstrap Tables - Complete Guide with Examples

1. Basic Table

Minimal styling—just light padding and horizontal dividers.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First Name</th>
      <th scope="col">Last Name</th>
      <th scope="col">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>john@example.com</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>jane@example.com</td>
    </tr>
  </tbody>
</table>

2. Striped Rows

Adds zebra-striping to table rows.

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Position</th>
      <th scope="col">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Developer</td>
      <td>$80,000</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Designer</td>
      <td>$75,000</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>Manager</td>
      <td>$95,000</td>
    </tr>
  </tbody>
</table>

3. Bordered Table

Adds borders on all sides of the table and cells.

<table class="table table-bordered">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Product</th>
      <th scope="col">Quantity</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Laptop</td>
      <td>2</td>
      <td>$1200</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Mouse</td>
      <td>5</td>
      <td>$25</td>
    </tr>
  </tbody>
</table>

4. Table Without Borders

Removes all borders from the table.

<table class="table table-borderless">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Task</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Complete project</td>
      <td>In Progress</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Review code</td>
      <td>Pending</td>
    </tr>
  </tbody>
</table>

5. Hoverable Rows

Adds a hover effect (gray background) to table rows.

<table class="table table-hover">
  <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>Sales</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Carol</td>
      <td>Marketing</td>
    </tr>
  </tbody>
</table>

6. Small Table (Compact)

Cuts cell padding in half for a more compact look.

<table class="table table-sm">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Item</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Coffee</td>
      <td>$3.50</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sandwich</td>
      <td>$8.99</td>
    </tr>
  </tbody>
</table>

7. Contextual Classes (Colored Rows/Cells)

Add color to rows or individual cells.

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Status</th>
      <th scope="col">Message</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-primary">
      <th scope="row">1</th>
      <td>Primary</td>
      <td>Info message</td>
    </tr>
    <tr class="table-success">
      <th scope="row">2</th>
      <td>Success</td>
      <td>Completed successfully</td>
    </tr>
    <tr class="table-danger">
      <th scope="row">3</th>
      <td>Danger</td>
      <td>Error occurred</td>
    </tr>
    <tr class="table-warning">
      <th scope="row">4</th>
      <td>Warning</td>
      <td>Check this issue</td>
    </tr>
    <tr class="table-info">
      <th scope="row">5</th>
      <td>Info</td>
      <td>Update available</td>
    </tr>
  </tbody>
</table>

Available contextual classes:

.table-primary
.table-secondary
.table-success
.table-danger
.table-warning
.table-info
.table-light
.table-dark

8. Dark Table

Inverted color scheme.

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Admin User</td>
      <td>Administrator</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Regular User</td>
      <td>Viewer</td>
    </tr>
  </tbody>
</table>

Combine with other classes: <table class="table table-dark table-striped table-hover">

9. Responsive Tables

Wrap the table in a .table-responsive div to enable horizontal scrolling on small screens.

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

Responsive Breakpoints

<div class="table-responsive-sm">  <!-- scroll at sm breakpoint and below -->
<div class="table-responsive-md">  <!-- scroll at md breakpoint and below -->
<div class="table-responsive-lg">  <!-- scroll at lg breakpoint and below -->
<div class="table-responsive-xl">  <!-- scroll at xl breakpoint and below -->
<div class="table-responsive-xxl"> <!-- scroll at xxl breakpoint and below -->

10. Combined Examples

Striped + Hover + Bordered

<table class="table table-striped table-hover table-bordered">
  <thead class="table-dark">
    <tr>
      <th scope="col">ID</th>
      <th scope="col">Name</th>
      <th scope="col">Email</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Emma Watson</td>
      <td>emma@example.com</td>
      <td class="table-success">Active</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>James Brown</td>
      <td>james@example.com</td>
      <td class="table-warning">Pending</td>
    </tr>
  </tbody>
</table>

Full Featured Responsive Table

<div class="table-responsive">
  <table class="table table-striped table-hover table-bordered align-middle">
    <thead class="table-primary">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Position</th>
        <th scope="col">Office</th>
        <th scope="col">Age</th>
        <th scope="col">Start Date</th>
        <th scope="col">Salary</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$320,800</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>Tokyo</td>
        <td>63</td>
        <td>2011/07/25</td>
        <td>$170,750</td>
      </tr>
    </tbody>
    <tfoot class="table-secondary">
      <tr>
        <td colspan="6" class="text-end">Total:</td>
        <td>$491,550</td>
      </tr>
    </tfoot>
  </table>
</div>

11. Table Head Options

Light header <thead class="table-light">

Dark header <thead class="table-dark">

12. Vertical Alignment

Use .align-middle on rows or cells.

<table class="table align-middle">
  <tbody>
    <tr>
      <td class="align-top">Top aligned</td>
      <td class="align-middle">Middle aligned</td>
      <td class="align-bottom">Bottom aligned</td>
    </tr>
  </tbody>
</table>

Quick Reference Table

Class	Description
`.table`	Base table class
`.table-striped`	Zebra striping
`.table-bordered`	Borders on all sides
`.table-borderless`	No borders
`.table-hover`	Hover effect on rows
`.table-sm`	Compact/small table
`.table-dark`	Dark theme
`.table-responsive`	Responsive wrapper
`.table-primary/success/danger/etc.`	Contextual colors
`.align-top/middle/bottom`	Vertical alignment

Complete HTML Demo Page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Tables Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container py-4">
  <h1 class="mb-4">Bootstrap Tables</h1>
  
  <h2>Basic Table</h2>
  <table class="table">
    <thead><tr><th>#</th><th>Name</th><th>Email</th></tr></thead>
    <tbody><tr><th>1</th><td>John</td><td>john@example.com</td></tr></tbody>
  </table>

  <h2>Striped + Hover + Bordered</h2>
  <table class="table table-striped table-hover table-bordered">
    <thead class="table-dark"><tr><th>ID</th><th>Product</th><th>Price</th></tr></thead>
    <tbody><tr><th>1</th><td>Laptop</td><td>$999</td></tr></tbody>
  </table>

  <h2>Responsive Table</h2>
  <div class="table-responsive">
    <table class="table"><!-- wide table content --></table>
  </div>
</body>
</html>