Your website requires functional and professional tables, which you can easily obtain through Bootstrap classes. The introduction of Bootstrap 5 tables eliminates the need for complex coding.

Bootstrap 5 Tables Guide for Beginners

Byjvcodes

Bootstrap 5 provides tools that enable the simple creation of tables that display modern professional looks. The built-in classes of Bootstrap allow quick development of standard tables together with bordered tables and mobile-responsive tables.

This section demonstrates the implementation of Bootstrap tables through working examples.

What is a Bootstrap Table?

Regular HTML tables gain their presentable appearance through supplementary classes that create attractive designs. Tables using these classes require little CSS to acquire a professional, modern appearance.

The table class .table stands as the base for most applied Bootstrap styles. Table-style basics will appear after applying to this class.

Your website requires functional and professional tables, which you can easily obtain through Bootstrap classes. The introduction of Bootstrap 5 tables eliminates the need for complex coding.

Why Use Bootstrap Tables?

Bootstrap tables save time. These tables appear attractive through any screen type, whether users view them on phones, laptops, or tablets. No custom CSS is needed!

Basic Table Setup

Add .table to your HTML table for instant styling:

<table class="table">  
  <tr>  
    <th>Name</th>  
    <th>Email</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>john@email.com</td>  
  </tr>  
</table>

Striped Table Rows

Want zebra stripes in your table? Use the .table-striped class.

<table class="table table-striped">
  <tr>
    <th>Name</th>
    <th>Role</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Manager</td>
  </tr>
  <tr>
    <td>Mike</td>
    <td>Developer</td>
  </tr>
</table>

Add Borders to Tables

Need clear borders around cells? Just add .table-bordered.

<table class="table table-bordered">
  <tr>
    <th>Item</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Pen</td>
    <td>$1</td>
  </tr>
</table>

Hover Effect on Rows

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

<table class="table table-hover">
  <tr>
    <th>Username</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>admin</td>
    <td>Active</td>
  </tr>
</table>

Compact Table with Less Padding

Need a smaller, tight table? Use .table-sm.

<table class="table table-sm">
  <tr>
    <th>Task</th>
    <th>Done</th>
  </tr>
  <tr>
    <td>Login system</td>
    <td>Yes</td>
  </tr>
</table>

Add Colors to Rows or Cells

You can use contextual classes like .table-success, .table-danger, .table-info, etc., to give meaning to your rows or cells.

<table class="table">
  <tr class="table-success">
    <td>Passed</td>
  </tr>
  <tr class="table-danger">
    <td>Failed</td>
  </tr>
</table>

Responsive Tables on Small Screens

If your table is too wide, use .table-responsive. It lets the table scroll on mobile devices.

<div class="table-responsive">
  <table class="table">
    <tr>
      <th>Item</th>
      <th>Description</th>
      <th>Price</th>
    </tr>
    <tr>
      <td>Book</td>
      <td>HTML Guide</td>
      <td>$10</td>
    </tr>
  </table>
</div>

Bootstrap 5 Tables Practical Examples

1. Employee List with Striped Rows

<table class="table table-striped">
  <thead>
    <tr>
      <th>Employee</th>
      <th>Department</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sarah Khan</td>
      <td>Marketing</td>
      <td>sarah@company.com</td>
    </tr>
    <tr>
      <td>Ali Raza</td>
      <td>Sales</td>
      <td>ali@company.com</td>
    </tr>
    <tr>
      <td>Ayesha Noor</td>
      <td>HR</td>
      <td>ayesha@company.com</td>
    </tr>
  </tbody>
</table>

2. Order Summary with Bordered + Hover

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Order ID</th>
      <th>Product</th>
      <th>Status</th>
      <th>Total</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>#1001</td>
      <td>Smart Watch</td>
      <td>Shipped</td>
      <td>$120</td>
    </tr>
    <tr>
      <td>#1002</td>
      <td>Laptop</td>
      <td>Pending</td>
      <td>$950</td>
    </tr>
    <tr>
      <td>#1003</td>
      <td>Mobile</td>
      <td>Delivered</td>
      <td>$399</td>
    </tr>
  </tbody>
</table>

3. Student Grades Table with Contextual Classes

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>Grade</th>
    </tr>
  </thead>
  <tbody>
    <tr class="table-success">
      <td>Hassan</td>
      <td>Math</td>
      <td>A+</td>
    </tr>
    <tr class="table-warning">
      <td>Zara</td>
      <td>Science</td>
      <td>B</td>
    </tr>
    <tr class="table-danger">
      <td>Ahmed</td>
      <td>English</td>
      <td>Fail</td>
    </tr>
  </tbody>
</table>

4. Responsive Pricing Table (Mobile Friendly)

<div class="table-responsive">
  <table class="table table-bordered text-center">
    <thead>
      <tr>
        <th>Plan</th>
        <th>Price</th>
        <th>Storage</th>
        <th>Support</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Free</td>
        <td>$0</td>
        <td>5GB</td>
        <td>Email</td>
      </tr>
      <tr>
        <td>Pro</td>
        <td>$15</td>
        <td>50GB</td>
        <td>24/7 Chat</td>
      </tr>
      <tr>
        <td>Business</td>
        <td>$30</td>
        <td>200GB</td>
        <td>Phone + Email</td>
      </tr>
    </tbody>
  </table>
</div>

5. Inventory Table with Small Table Class

<table class="table table-sm table-striped table-hover">
  <thead>
    <tr>
      <th>Item</th>
      <th>Stock</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>USB Drive</td>
      <td>120</td>
      <td>$8</td>
    </tr>
    <tr>
      <td>HDMI Cable</td>
      <td>75</td>
      <td>$12</td>
    </tr>
    <tr>
      <td>Power Bank</td>
      <td>60</td>
      <td>$20</td>
    </tr>
  </tbody>
</table>

6. Employee Directory

<table class="table table-bordered">  
  <thead class="table-dark">  
    <tr>  
      <th>Name</th>  
      <th>Role</th>  
      <th>Department</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>Sarah Johnson</td>  
      <td><span class="badge bg-info">Developer</span></td>  
      <td>IT</td>  
    </tr>  
    <tr>  
      <td>Mike Chen</td>  
      <td><span class="badge bg-warning">Manager</span></td>  
      <td>Sales</td>  
    </tr>  
  </tbody>  
</table>

Key features:

  • Dark header for contrast
  • Badges for role tags
  • Bordered layout

7. Pricing Comparison Table

<table class="table table-sm">  
  <thead>  
    <tr>  
      <th>Feature</th>  
      <th>Basic</th>  
      <th>Pro <span class="badge bg-danger">Most Popular</span></th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>Users</td>  
      <td>1</td>  
      <td class="table-success">5</td>  
    </tr>  
    <tr>  
      <td>Storage</td>  
      <td>5GB</td>  
      <td class="table-success">Unlimited</td>  
    </tr>  
  </tbody>  
</table>

Key features:

  • Compact design (.table-sm)
  • Green highlights for premium features
  • “Most Popular” badge

8. Order History Table

<div class="table-responsive">  
  <table class="table table-striped">  
    <thead>  
      <tr>  
        <th>Order #</th>  
        <th>Date</th>  
        <th>Amount</th>  
        <th>Status</th>  
      </tr>  
    </thead>  
    <tbody>  
      <tr class="table-success">  
        <td>#1256</td>  
        <td>2023-08-15</td>  
        <td>$89</td>  
        <td>Delivered</td>  
      </tr>  
      <tr class="table-danger">  
        <td>#1257</td>  
        <td>2023-08-16</td>  
        <td>$45</td>  
        <td>Canceled</td>  
      </tr>  
    </tbody>  
  </table>  
</div>

Key features:

  • Green/red status rows
  • Stripes for easy row tracking
  • Mobile-friendly scrolling

9. Project Task Tracker.

<table class="table table-hover">  
  <thead>  
    <tr class="table-info">  
      <th>Task</th>  
      <th>Assignee</th>  
      <th>Status</th>  
    </tr>  
  </thead>  
  <tbody>  
    <tr>  
      <td>Design Homepage</td>  
      <td>Alice</td>  
      <td><span class="text-success">Completed</span></td>  
    </tr>  
    <tr>  
      <td>Test Payment System</td>  
      <td>Bob</td>  
      <td><span class="text-warning">In Progress</span></td>  
    </tr>  
  </tbody>  
</table>

Key features:

  • Hover effect for interactivity
  • Color-coded status text
  • Blue header for visual separation

10. E-Commerce Product Inventory

<div class="table-responsive">  
  <table class="table table-striped table-hover">  
    <thead>  
      <tr class="table-primary">  
        <th>Product</th>  
        <th>Price</th>  
        <th>Stock</th>  
      </tr>  
    </thead>  
    <tbody>  
      <tr class="table-success">  
        <td>Wireless Headphones</td>  
        <td>$99</td>  
        <td>In Stock (50+)</td>  
      </tr>  
      <tr class="table-warning">  
        <td>Smartwatch</td>  
        <td>$199</td>  
        <td>Low Stock (3 left)</td>  
      </tr>  
      <tr class="table-danger">  
        <td>Gaming Mouse</td>  
        <td>$45</td>  
        <td>Out of Stock</td>  
      </tr>  
    </tbody>  
  </table>  
</div>

Key features:

  • Striped rows for readability
  • Red/yellow/green status alerts
  • Scrolls horizontally on mobile

Best Practices

  • Avoid clutter: Use compact tables for dense data.
  • Prioritize readability: Stick to 2-3 colors max.
  • Test on mobile: Always check responsive behavior.

Your Turn!

Try this exercise:

  1. Create a table with striped rows and borders.
  2. Add a warning row for low-stock items.
  3. Make it scroll on mobile.

Solution:

<div class="table-responsive">  
  <table class="table table-striped table-bordered">  
    <tr><th>Item</th><th>Stock</th></tr>  
    <tr><td>Shirts</td><td>100</td></tr>  
    <tr class="table-warning"><td>Shoes</td><td>5</td></tr>  
  </table>  
</div>

Final Words

Anyone can design tables using the Bootstrap framework. A simple class addition will finish the design. Bootstrap table design classes provide immediate benefits for your table appearance, so experiment with them today.

Bootstrap 5 tables provide an easy and effective solution to develop tables. A few classes let you design tables that showcase professionalism across various devices. Start small, experiment with colors, and watch your data shine!

Similar Posts

This Modern Bootstrap Portfolio Template serves all Material UI designers who want a clean modern template for their portfolio.
|

Modern Bootstrap Portfolio Template for Material UI Designer Using HTML, CSS and JavaScript (Free Source Code)

This Modern Bootstrap Portfolio Template serves all Material UI designers who want a clean modern template for their portfolio. Users can start easily with this template since it uses HTML, CSS, Bootstrap and JavaScript code that also follows best coding practices for beginners. The free source code I provide enables you to modify it according…

If you want to build websites that look awesome, The Missing Bootstrap 5 Guide is a must-read.
|

The Missing Bootstrap 5 Guide

If you want to build websites that look awesome, The Missing Bootstrap 5 Guide is a must-read. Jeppe Schaumburg Jensen authored this book to demonstrate the complete capabilities of Bootstrap 5 with Sass and JavaScript integration. The guide contains numerous useful practical suggestions, which make it valuable for programmers, according to my evaluation. The guide demonstrates professional…

Leave a Reply

Your email address will not be published. Required fields are marked *