Bootstrap 5 Framework

Tables

13 min Lesson 12 of 40

Tables in Bootstrap 5

Bootstrap 5 provides comprehensive table styling that transforms plain HTML tables into beautiful, responsive data displays. Tables are essential for organizing and presenting structured data in a clear, scannable format.

1. Basic Table Styles

Start with the .table class to apply Bootstrap's default styling to any <table> element.

<!-- Basic Bootstrap Table -->
<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane</td>
            <td>Smith</td>
            <td>jane@example.com</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Bob</td>
            <td>Johnson</td>
            <td>bob@example.com</td>
        </tr>
    </tbody>
</table>
        

Structure: A well-structured table uses <thead> for headers, <tbody> for body content, and optionally <tfoot> for footer content.

<!-- Table with Footer -->
<table class="table">
    <thead>
        <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Item A</td>
            <td>5</td>
            <td>$50.00</td>
        </tr>
        <tr>
            <td>Item B</td>
            <td>3</td>
            <td>$30.00</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2">Total</th>
            <th>$80.00</th>
        </tr>
    </tfoot>
</table>
        

2. Table Variants (Striped, Bordered, Hover)

Bootstrap offers several table variants to enhance readability and interaction.

<!-- Striped Table -->
<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Project Alpha</td>
            <td>Active</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Project Beta</td>
            <td>Pending</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Project Gamma</td>
            <td>Completed</td>
        </tr>
    </tbody>
</table>

<!-- Bordered Table -->
<table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Alice</td>
            <td>Engineering</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bob</td>
            <td>Marketing</td>
        </tr>
    </tbody>
</table>

<!-- Borderless Table -->
<table class="table table-borderless">
    <thead>
        <tr>
            <th>Item</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Feature 1</td>
            <td>Description of feature</td>
        </tr>
    </tbody>
</table>

<!-- Hoverable Table -->
<table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Laptop</td>
            <td>$999</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Mouse</td>
            <td>$29</td>
        </tr>
    </tbody>
</table>

<!-- Combined Variants -->
<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>john@example.com</td>
        </tr>
    </tbody>
</table>
        

Combine Classes: You can combine multiple table classes like table-striped table-hover for enhanced visual effects.

3. Responsive Tables

Make tables scroll horizontally on small screens by wrapping them in a responsive container.

<!-- Always Responsive -->
<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Heading 1</th>
                <th>Heading 2</th>
                <th>Heading 3</th>
                <th>Heading 4</th>
                <th>Heading 5</th>
                <th>Heading 6</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
                <td>Data 5</td>
                <td>Data 6</td>
            </tr>
        </tbody>
    </table>
</div>

<!-- Responsive at Specific Breakpoints -->
<div class="table-responsive-sm">
    <!-- Scrollable below 576px -->
    <table class="table">...</table>
</div>

<div class="table-responsive-md">
    <!-- Scrollable below 768px -->
    <table class="table">...</table>
</div>

<div class="table-responsive-lg">
    <!-- Scrollable below 992px -->
    <table class="table">...</table>
</div>

<div class="table-responsive-xl">
    <!-- Scrollable below 1200px -->
    <table class="table">...</table>
</div>

<div class="table-responsive-xxl">
    <!-- Scrollable below 1400px -->
    <table class="table">...</table>
</div>
        

Mobile-First: Use responsive tables for data-heavy tables with many columns that don't fit on small screens. The table will scroll horizontally instead of breaking the layout.

4. Table Head Styles

Customize the appearance of table headers with color variants.

<!-- Dark Table Head -->
<table class="table">
    <thead class="table-dark">
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>john@example.com</td>
        </tr>
    </tbody>
</table>

<!-- Light Table Head -->
<table class="table">
    <thead class="table-light">
        <tr>
            <th>#</th>
            <th>Product</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Laptop</td>
            <td>$999</td>
        </tr>
    </tbody>
</table>

<!-- Primary Table Head -->
<table class="table">
    <thead class="table-primary">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data</td>
            <td>Data</td>
        </tr>
    </tbody>
</table>
        

Color Variants: Use any contextual color class (table-primary, table-success, table-danger, etc.) on <thead> elements.

5. Small Tables and Table Colors

Create compact tables and apply contextual colors to rows or cells.

<!-- Small Table -->
<table class="table table-sm">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Compact Row</td>
            <td>Active</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Another Row</td>
            <td>Pending</td>
        </tr>
    </tbody>
</table>

<!-- Contextual Row Colors -->
<table class="table">
    <thead>
        <tr>
            <th>Status</th>
            <th>Message</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-primary">
            <td>Info</td>
            <td>Primary information</td>
        </tr>
        <tr class="table-success">
            <td>Success</td>
            <td>Operation successful</td>
        </tr>
        <tr class="table-danger">
            <td>Error</td>
            <td>Operation failed</td>
        </tr>
        <tr class="table-warning">
            <td>Warning</td>
            <td>Proceed with caution</td>
        </tr>
        <tr class="table-info">
            <td>Information</td>
            <td>Additional details</td>
        </tr>
    </tbody>
</table>

<!-- Individual Cell Colors -->
<table class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Task 1</td>
            <td class="table-success">Complete</td>
        </tr>
        <tr>
            <td>Task 2</td>
            <td class="table-warning">In Progress</td>
        </tr>
        <tr>
            <td>Task 3</td>
            <td class="table-danger">Blocked</td>
        </tr>
    </tbody>
</table>
        

6. Table Captions and Vertical Alignment

<!-- Table with Caption -->
<table class="table">
    <caption>List of users and their details</caption>
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John Doe</td>
            <td>john@example.com</td>
        </tr>
    </tbody>
</table>

<!-- Caption on Top -->
<table class="table caption-top">
    <caption>Employee directory (caption on top)</caption>
    <thead>
        <tr>
            <th>Name</th>
            <th>Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Alice</td>
            <td>Engineering</td>
        </tr>
    </tbody>
</table>

<!-- Vertical Alignment -->
<table class="table align-middle">
    <thead>
        <tr>
            <th>Image</th>
            <th>Product</th>
            <th>Details</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><img src="product.jpg" alt="Product" style="height: 50px;"></td>
            <td>Product Name</td>
            <td>Description goes here<br>with multiple lines</td>
        </tr>
    </tbody>
</table>

<!-- Individual Row/Cell Alignment -->
<table class="table">
    <tbody>
        <tr class="align-top">
            <td>Top aligned</td>
            <td>Content<br>with<br>multiple<br>lines</td>
        </tr>
        <tr class="align-middle">
            <td>Middle aligned</td>
            <td>Content<br>with<br>multiple<br>lines</td>
        </tr>
        <tr class="align-bottom">
            <td>Bottom aligned</td>
            <td>Content<br>with<br>multiple<br>lines</td>
        </tr>
    </tbody>
</table>
        

Accessibility: Table captions help screen readers understand the purpose of the table. Always include them for better accessibility.

7. Practical Example: Dashboard Table

<div class="container py-5">
    <div class="card">
        <div class="card-header bg-primary text-white">
            <h3 class="card-title mb-0">Recent Orders</h3>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th>Order ID</th>
                            <th>Customer</th>
                            <th>Date</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><strong>#12345</strong></td>
                            <td>John Doe</td>
                            <td>2024-05-15</td>
                            <td>$125.00</td>
                            <td><span class="badge bg-success">Completed</span></td>
                            <td>
                                <button class="btn btn-sm btn-primary">View</button>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>#12346</strong></td>
                            <td>Jane Smith</td>
                            <td>2024-05-16</td>
                            <td>$89.50</td>
                            <td><span class="badge bg-warning">Pending</span></td>
                            <td>
                                <button class="btn btn-sm btn-primary">View</button>
                            </td>
                        </tr>
                        <tr>
                            <td><strong>#12347</strong></td>
                            <td>Bob Johnson</td>
                            <td>2024-05-16</td>
                            <td>$199.99</td>
                            <td><span class="badge bg-info">Shipped</span></td>
                            <td>
                                <button class="btn btn-sm btn-primary">View</button>
                            </td>
                        </tr>
                    </tbody>
                    <tfoot class="table-light">
                        <tr>
                            <th colspan="3">Total</th>
                            <th>$414.49</th>
                            <th colspan="2"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>
        

Practice Exercise

Task: Create a product inventory table with the following requirements:

At least 5 columns (ID, Product Name, Category, Stock, Price)
Use striped rows and hover effect
Dark header background
Responsive wrapper for mobile devices
Color-code stock levels: green for high stock (>50), yellow for medium (10-50), red for low (<10)
Add a footer row with total count
Include a caption describing the table

Bonus: Make it a small table and add action buttons in the last column.

Summary

Use .table class for basic Bootstrap table styling
.table-striped adds zebra-striping to rows
.table-bordered adds borders to all cells
.table-hover enables hover state on rows
.table-responsive makes tables scroll horizontally on small screens
Use responsive breakpoint classes (table-responsive-sm/md/lg/xl/xxl) for conditional scrolling
.table-dark or .table-light style the header
.table-sm creates compact tables with reduced padding
Contextual color classes (table-primary, table-success, etc.) highlight rows or cells
.caption-top positions caption above the table
Vertical alignment classes (align-top, align-middle, align-bottom) control cell content alignment