Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction

→

Basic Tables in Bootstrap 5

Basic Tables: Learn how to create and style basic tables with Bootstrap's default table classes.

Default Table

The most basic table styling in Bootstrap 5. Add the .table class to any <table> element.

Basic Table Example

#	First Name	Last Name	Username
1	John	Doe	@johndoe
2	Jane	Smith	@janesmith
3	Bob	Johnson	@bobjohnson
4	Alice	Williams	@alicew
5	Charlie	Brown	@charlieb

<!-- Basic Bootstrap table -->
            <table class="table">
            <thead>
                <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                <td>1</td>
                <td>John</td>
                <td>Doe</td>
                <td>@johndoe</td>
                </tr>
                <tr>
                <td>2</td>
                <td>Jane</td>
                <td>Smith</td>
                <td>@janesmith</td>
                </tr>
                <tr>
                <td>3</td>
                <td>Bob</td>
                <td>Johnson</td>
                <td>@bobjohnson</td>
                </tr>
            </tbody>
            </table>

Default Table Styling

Light gray borders between cells
Left-aligned text by default
Bold header text
Consistent vertical and horizontal padding
No outer borders by default
Responsive design friendly

CSS Properties Applied

.table {
            width: 100%;
            margin-bottom: 1rem;
            color: #212529;
            vertical-align: top;
            border-color: #dee2e6;
            }

            .table > :not(caption) > * > * {
            padding: 0.5rem 0.5rem;
            border-bottom-width: 1px;
            }

Table Head Options

Light Table Head

#	Product	Price
1	Laptop	$999
2	Mouse	$49
3	Keyboard	$129

<!-- Light table head -->
            <table class="table">
            <thead class="table-light">
                <tr>
                <th>#</th>
                <th>Product</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body -->
            </tbody>
            </table>

Dark Table Head

#	Product	Price
1	Laptop	$999
2	Mouse	$49
3	Keyboard	$129

<!-- Dark table head -->
            <table class="table">
            <thead class="table-dark">
                <tr>
                <th>#</th>
                <th>Product</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body -->
            </tbody>
            </table>

Table with Captions

Table Captions

A <caption> functions like a heading for a table. It helps screen readers and provides context.

List of employees and their departments
ID	Name	Department	Join Date
101	John Smith	Engineering	2022-01-15
102	Jane Doe	Marketing	2021-08-22
103	Bob Johnson	Sales	2023-03-10

Caption Placement Options

<!-- Caption at top (default) -->
            <table class="table">
            <caption>Top caption</caption>
            <!-- table content -->
            </table>

            <!-- Caption at bottom -->
            <table class="table caption-top">
            <caption>Top caption with class</caption>
            <!-- table content -->
            </table>

            <!-- Custom caption styling -->
            <caption class="text-center p-2 bg-light">
            Custom styled caption
            </caption>

Caption Best Practices

Be descriptive: Explain what the table contains
Keep it concise: Aim for 1-2 sentences
Use proper HTML: Always use <caption> tag
Accessibility: Required for screen readers
Positioning: Use .caption-top or .caption-bottom
Styling: Customize with Bootstrap utility classes

Table with Borders

Bordered Table

#	Item	Quantity	Price
1	Laptop	1	$999
2	Mouse	2	$98
3	Keyboard	1	$129

<!-- Bordered table -->
            <table class="table table-bordered">
            <thead>
                <tr>
                <th>#</th>
                <th>Item</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body -->
            </tbody>
            </table>

Borderless Table

#	Task	Status	Due Date
1	Design Review	Completed	2023-10-15
2	Code Deployment	In Progress	2023-10-20
3	Testing	Pending	2023-10-25

<!-- Borderless table -->
            <table class="table table-borderless">
            <thead>
                <tr>
                <th>#</th>
                <th>Task</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body -->
            </tbody>
            </table>

Table Alignment

Text Alignment in Tables

Alignment	Class	Description	Example
Left (Default)	`text-start`	Text aligned to the left	Left aligned text
Center	`text-center`	Text centered in cell	Centered text
Right	`text-end`	Text aligned to the right	Right aligned text
Vertical Middle	`align-middle`	Vertical center alignment	Middle aligned
Vertical Bottom	`align-bottom`	Bottom alignment	Bottom aligned

Practical Example

Product	Category	Price	Stock
Laptop Pro	Electronics	$1,299.00	15
Wireless Mouse	Accessories	$49.99	42

Code Example

<!-- Table with aligned cells -->
            <table class="table">
            <thead>
                <tr>
                <th class="text-start">Product</th>
                <th class="text-center">Category</th>
                <th class="text-end">Price</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                <td class="text-start">Laptop</td>
                <td class="text-center">Electronics</td>
                <td class="text-end">$999.00</td>
                </tr>
            </tbody>
            </table>

            <!-- Vertical alignment -->
            <tr>
            <td class="align-middle">Middle</td>
            <td class="align-top">Top</td>
            <td class="align-bottom">Bottom</td>
            </tr>

Table Size Variations

Small Table

ID	Name	Email	Role
101	John Smith	john@example.com	Admin
102	Jane Doe	jane@example.com	User
103	Bob Johnson	bob@example.com	Editor

<!-- Small table -->
            <table class="table table-sm">
            <thead>
                <tr>
                <th>ID</th>
                <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <!-- Table body -->
            </tbody>
            </table>

Use Case: Perfect for dashboards and admin panels where space is limited.

Default vs Small Comparison

Property	Default Table	Small Table (`.table-sm`)
Cell Padding (Vertical)	0.5rem	0.25rem
Cell Padding (Horizontal)	0.5rem	0.3rem
Font Size	1rem	0.875rem
Header Font Size	1rem	0.875rem
Border Width	1px	1px
Use Case	General data display	Compact layouts, dashboards

Note: Small tables might reduce readability for some users. Consider accessibility when using .table-sm.

Table with Contextual Classes

Contextual Table Rows

Add contextual classes to table rows to indicate different states.

Class	Description	Example
`.table-primary`	Primary action or highlight	Selected item
`.table-success`	Successful or positive action	Completed task
`.table-danger`	Dangerous or negative action	Error or warning
`.table-warning`	Warning or caution needed	Pending review
`.table-info`	Informational content	Note or information
`.table-light`	Light background variant	Subtle highlight
`.table-dark`	Dark background variant	Important item

<!-- Contextual table rows -->
            <table class="table">
            <tbody>
                <tr class="table-primary">
                <td>Primary row</td>
                <td>Highlighted content</td>
                </tr>
                <tr class="table-success">
                <td>Success row</td>
                <td>Completed action</td>
                </tr>
                <tr class="table-danger">
                <td>Danger row</td>
                <td>Error or issue</td>
                </tr>
                <tr class="table-warning">
                <td>Warning row</td>
                <td>Needs attention</td>
                </tr>
                <tr class="table-info">
                <td>Info row</td>
                <td>Informational</td>
                </tr>
            </tbody>
            </table>

Table with Hover Effects

Hoverable Rows

Add .table-hover to enable a hover state on table rows.

#	Customer	Order Date	Amount	Status
1001	John Smith	2023-10-15	$299.99	Delivered
1002	Jane Doe	2023-10-16	$149.50	Processing
1003	Bob Johnson	2023-10-17	$499.99	Shipped
1004	Alice Brown	2023-10-18	$89.99	Cancelled
1005	Charlie Wilson	2023-10-19	$199.99	Delivered

Hover Effect Details

Default color: Light gray background on hover
Works with: All table rows in <tbody>
Doesn't affect: Table header or footer rows
Can be combined: With other table classes
Accessibility: Provides visual feedback
Customization: Can be customized with CSS

Code Example

<!-- Hoverable table -->
            <table class="table table-hover">
            <thead>
                <tr>
                <th>#</th>
                <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                <td>1</td>
                <td>John Doe</td>
                </tr>
                <tr>
                <td>2</td>
                <td>Jane Smith</td>
                </tr>
            </tbody>
            </table>

            <!-- Hover with other classes -->
            <table class="table table-hover table-striped">
            <!-- Combined effects -->
            </table>

Basic Table Combinations

Common Combinations

#	Feature	Classes Used
1	Striped with borders	`.table-striped .table-bordered`
2	Hoverable with dark header	`.table-hover .table-dark`
3	Small bordered table	`.table-sm .table-bordered`
4	Striped hoverable	`.table-striped .table-hover`
5	All features combined	`.table-striped .table-bordered .table-hover .table-sm`

Complete Example

<!-- Complete table example -->
            <div class="table-responsive">
            <table class="table table-striped table-bordered 
                            table-hover table-sm">
                
                <caption>Employee performance report</caption>
                
                <thead class="table-dark">
                <tr>
                    <th scope="col" class="text-center">ID</th>
                    <th scope="col" class="text-start">Name</th>
                    <th scope="col" class="text-center">Department</th>
                    <th scope="col" class="text-end">Salary</th>
                </tr>
                </thead>
                
                <tbody>
                <tr class="table-success">
                    <td class="text-center">101</td>
                    <td class="text-start">John Smith</td>
                    <td class="text-center">Engineering</td>
                    <td class="text-end">$85,000</td>
                </tr>
                <tr>
                    <td class="text-center">102</td>
                    <td class="text-start">Jane Doe</td>
                    <td class="text-center">Marketing</td>
                    <td class="text-end">$75,000</td>
                </tr>
                </tbody>
                
                <tfoot>
                <tr class="table-info">
                    <td colspan="3" class="text-end">
                    <strong>Average:</strong>
                    </td>
                    <td class="text-end">
                    <strong>$80,000</strong>
                    </td>
                </tr>
                </tfoot>
                
            </table>
            </div>

Best Practices for Basic Tables

Basic Table Guidelines

✅ Always start with .table class
✅ Use .table-responsive wrapper for mobile support
✅ Include proper table structure (<thead>, <tbody>, <tfoot>)
✅ Add <caption> for accessibility
✅ Use scope attributes in header cells
✅ Choose appropriate table style based on content
✅ Test table on different screen sizes

When to Use Which Style

Default table: General data display
Striped table: Long lists for better readability
Bordered table: Financial data, forms
Hover table: Interactive data tables
Small table: Dashboards, compact spaces
Borderless table: Minimalist designs

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial