Bootstrap - Bootstrap Tables

Bootstrap Tables

Bootstrap provides a set of classes to style HTML tables in a clean, responsive, and visually appealing way. These classes enhance the default HTML <table> element, making it easier to present data with consistent formatting across different devices.

1. Basic Table

Bootstrap provides the .table class to style basic tables.
By default, it applies padding, border-collapse, and typography styles.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Basic Table</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <h3>Basic Table</h3>
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Name</th>
          <th>Course</th>
          <th>Marks</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Rahul</td>
          <td>Web Development</td>
          <td>85</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Anjali</td>
          <td>Data Science</td>
          <td>90</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

2. Table Variants

Bootstrap offers different table styles to make tables more readable and visually distinct.

a) Striped Rows (.table-striped)

Adds zebra-striping to table rows for better readability.

<table class="table table-striped">

b) Bordered Table (.table-bordered)

Adds borders around the entire table and each cell.

<table class="table table-bordered">

c) Hoverable Rows (.table-hover)

Highlights a row when the mouse pointer hovers over it.

<table class="table table-hover">

d) Dark Table (.table-dark)

Applies a dark background and light text to the table.

<table class="table table-dark">

e) Borderless Table (.table-borderless)

Removes all borders from the table.

<table class="table table-borderless">

Example Combining Variants:

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>Student</th>
      <th>Subject</th>
      <th>Marks</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Amit</td>
      <td>Math</td>
      <td>78</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Priya</td>
      <td>Science</td>
      <td>88</td>
    </tr>
  </tbody>
</table>

3. Table Colors (Contextual Classes)

Bootstrap provides contextual classes to style rows or cells based on meaning or status.

Class Purpose
.table-primary Highlights primary data
.table-secondary Subtle background shade
.table-success Indicates success
.table-danger Indicates danger/error
.table-warning Highlights warnings
.table-info Highlights information
.table-light Light background
.table-dark Dark background

Example:

<table class="table">
  <thead>
    <tr>
      <th>Order ID</th>
      <th>Product</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>101</td>
      <td>Laptop</td>
      <td>Delivered</td>
    </tr>
    <tr class="table-warning">
      <td>102</td>
      <td>Headphones</td>
      <td>Pending</td>
    </tr>
    <tr class="table-danger">
      <td>103</td>
      <td>Mobile</td>
      <td>Cancelled</td>
    </tr>
  </tbody>
</table>

4. Small & Compact Tables

Use .table-sm to make tables more compact by reducing cell padding.

<table class="table table-sm">

5. Responsive Tables

Bootstrap provides .table-responsive to make tables scrollable horizontally on smaller screens.

Example:

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Address</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Karan</td>
        <td>[email protected]</td>
        <td>9876543210</td>
        <td>Mumbai, India</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Meera</td>
        <td>[email protected]</td>
        <td>9988776655</td>
        <td>Delhi, India</td>
      </tr>
    </tbody>
  </table>
</div>

6. Table Head Options

Dark Header (.table-dark)

Applies a dark background to <thead> only.

<thead class="table-dark">

Light Header (.table-light)

Applies a light background to <thead> only.

<thead class="table-light">

7. Table Alignment & Sizing

a) Vertical Alignment

Bootstrap provides utility classes for vertical alignment inside tables:

  • .align-top

  • .align-middle

  • .align-bottom

<td class="align-middle">Centered Vertically</td>

b) Column Width

You can use Bootstrap’s grid classes or custom CSS to set column widths.

<th style="width: 200px;">Name</th>

8. Combining Multiple Features

<table class="table table-striped table-hover table-bordered table-sm">
  <thead class="table-dark">
    <tr>
      <th>Roll No</th>
      <th>Name</th>
      <th>Course</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>1</td>
      <td>Ravi</td>
      <td>Java</td>
      <td>Passed</td>
    </tr>
    <tr class="table-warning">
      <td>2</td>
      <td>Sneha</td>
      <td>Python</td>
      <td>Pending</td>
    </tr>
    <tr class="table-danger">
      <td>3</td>
      <td>Akash</td>
      <td>PHP</td>
      <td>Failed</td>
    </tr>
  </tbody>
</table>

Summary

Feature Class / Usage
Basic table .table
Striped rows .table-striped
Bordered table .table-bordered
Hover effect .table-hover
Dark theme .table-dark
Borderless table .table-borderless
Small table .table-sm
Responsive table .table-responsive
Contextual colors .table-success, .table-danger, etc.
Header styles .table-dark, .table-light
Vertical alignment .align-top, .align-middle, .align-bottom