BootstrapHow-ToBeginner · 3 min read

How to Create Table in Bootstrap: Simple Guide with Examples

To create a table in Bootstrap, use the <table> element with the table class. You can add extra classes like table-striped for striped rows or table-bordered for borders to style your table easily.

📐

Syntax

Bootstrap tables use the standard HTML <table> element with Bootstrap classes to add styling and responsiveness.

table: Base class for Bootstrap table styling.
table-striped: Adds zebra-striping to rows for better readability.
table-bordered: Adds borders around all cells.
table-hover: Highlights rows on mouse hover.
table-responsive: Makes the table scroll horizontally on small screens.

html

<table class="table">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
  </tbody>
</table>

Output

A simple table with two columns and one row, styled with Bootstrap's default table style.

💻

Example

This example shows a Bootstrap table with striped rows, borders, and hover effect inside a responsive container.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Table Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-4">
    <div class="table-responsive">
      <table class="table table-striped table-bordered table-hover">
        <thead class="table-dark">
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>City</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Alice</td>
            <td>30</td>
            <td>New York</td>
          </tr>
          <tr>
            <td>Bob</td>
            <td>25</td>
            <td>Los Angeles</td>
          </tr>
          <tr>
            <td>Charlie</td>
            <td>35</td>
            <td>Chicago</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>
</html>

Output

A responsive table with dark header, striped rows, borders around cells, and row highlight on hover, showing three people with their age and city.

⚠️

Common Pitfalls

Common mistakes when creating Bootstrap tables include:

Forgetting to add the table class, which means no Bootstrap styles apply.
Not wrapping the table in table-responsive for mobile, causing horizontal overflow.
Using deprecated Bootstrap versions without checking class names.
Adding custom CSS that conflicts with Bootstrap styles.

html

<!-- Wrong: Missing 'table' class -->
<table>
  <tr><td>Data</td></tr>
</table>

<!-- Right: Includes 'table' class -->
<table class="table">
  <tr><td>Data</td></tr>
</table>

Output

The first table looks plain with no styling; the second table has Bootstrap's default styling.

📊

Quick Reference

Class	Description
table	Basic Bootstrap table styling
table-striped	Adds striped rows for readability
table-bordered	Adds borders around all cells
table-hover	Highlights rows on hover
table-responsive	Makes table scroll horizontally on small screens
table-dark	Dark themed table header or entire table

✅

Key Takeaways

Always add the 'table' class to your element to apply Bootstrap styles.

Use 'table-responsive' to make tables scroll on small screens and avoid layout issues.

Combine classes like 'table-striped', 'table-bordered', and 'table-hover' for better table appearance.

Wrap your table in a container with padding for neat spacing.

Check Bootstrap version and use the correct class names for consistent styling.