Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

NextIntroduction

→

Striped Tables in Bootstrap 5

Striped Tables: Add zebra-striping to table rows for better readability with the .table-striped class.

Basic Striped Table

Striped tables alternate background colors between rows to improve readability, especially for large datasets.

Basic Striped Table Example

#	First Name	Last Name	Email	Department
1	John	Smith	john@example.com	Engineering
2	Jane	Doe	jane@example.com	Marketing
3	Bob	Johnson	bob@example.com	Sales
4	Alice	Williams	alice@example.com	HR
5	Charlie	Brown	charlie@example.com	Finance
6	David	Miller	david@example.com	Operations
7	Eva	Davis	eva@example.com	IT
8	Frank	Wilson	frank@example.com	Support

<!-- Basic striped table -->
            <table class="table table-striped">
            <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>
                <!-- More rows will alternate colors -->
            </tbody>
            </table>

Striped Table Benefits

Improved readability for long tables
Reduced eye strain when scanning data
Easier to track rows horizontally
Better visual hierarchy
Professional appearance
Accessibility improvement

How It Works

Odd rows: White background
Even rows: Light gray background
Header remains unaffected
Works with any number of rows
CSS-based, no JavaScript needed
Responsive by default

Striped Table Variations

Striped with Borders

Product ID	Name	Category	Price	Stock
P-1001	Laptop Pro	Electronics	$1,299	15
P-1002	Wireless Mouse	Accessories	$49	42
P-1003	Mechanical Keyboard	Accessories	$129	28
P-1004	4K Monitor	Electronics	$399	12
P-1005	USB-C Hub	Accessories	$89	35

<!-- Striped table with borders -->
            <table class="table table-striped table-bordered">
            <thead>
                <tr>
                <th>Product ID</th>
                <th>Name</th>
                </tr>
            </thead>
            <tbody>
                <!-- Striped rows with borders -->
            </tbody>
            </table>

Striped with Hover

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

<!-- Striped table with hover -->
            <table class="table table-striped table-hover">
            <thead>
                <tr>
                <th>Order #</th>
                <th>Customer</th>
                </tr>
            </thead>
            <tbody>
                <!-- Striped rows with hover effect -->
            </tbody>
            </table>

Colored Striped Tables

Primary Striped Table

#	Feature	Status	Priority
1	User Authentication	Active	High
2	Payment Processing	Active	High
3	Email Notifications	Pending	Medium
4	Analytics Dashboard	Active	Medium
5	Mobile App	In Development	Low

<!-- Colored striped table -->
            <table class="table table-striped table-primary">
            <thead>
                <tr>
                <th>#</th>
                <th>Feature</th>
                </tr>
            </thead>
            <tbody>
                <!-- Striped rows with primary color -->
            </tbody>
            </table>

All Color Variants

Success
Row 1
Row 2

Danger
Row 1
Row 2

Warning
Row 1
Row 2

Info
Row 1
Row 2

Dark
Row 1
Row 2

Light
Row 1
Row 2

Note: Colored striped tables use alternating shades of the same color for better contrast and readability.

Striped Table with Small Size

Compact Striped Tables

ID	Username	Email	Role	Last Login	Status
101	john_doe	john@example.com	Administrator	2023-10-15 14:30	Active
102	jane_smith	jane@example.com	Editor	2023-10-14 09:15	Active
103	bob_johnson	bob@example.com	Author	2023-10-13 16:45	Pending
104	alice_williams	alice@example.com	Subscriber	2023-10-12 11:20	Active
105	charlie_brown	charlie@example.com	Subscriber	2023-10-11 08:50	Inactive
106	david_miller	david@example.com	Editor	2023-10-10 13:10	Active
107	eva_davis	eva@example.com	Author	2023-10-09 10:05	Active
108	frank_wilson	frank@example.com	Subscriber	2023-10-08 15:30	Pending

Small Striped Table Benefits

Saves vertical space
Good for dashboards and admin panels
Maintains readability with stripes
Ideal for tables with many rows
Combines well with other table features

Code Example

<!-- Small striped table -->
            <table class="table table-striped table-sm">
            <thead>
                <tr>
                <th>ID</th>
                <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <!-- Compact striped rows -->
            </tbody>
            </table>

            <!-- Small striped with borders -->
            <table class="table table-striped table-sm table-bordered">
            <!-- Compact with borders -->
            </table>

            <!-- Small striped with hover -->
            <table class="table table-striped table-sm table-hover">
            <!-- Compact with hover -->
            </table>

Striped Column Tables

Column Striping with CSS

Month	Revenue	Expenses	Profit	Growth
January	$125,000	$85,000	$40,000	+12%
February	$135,000	$75,000	$60,000	+20%
March	$110,000	$65,000	$45,000	+5%
April	$95,000	$60,000	$35,000	-8%

/* Custom column striping */
            .column-striped tbody td:nth-child(2n) {
            background-color: rgba(0, 0, 0, 0.05);
            }

            .column-striped thead th:nth-child(2n) {
            background-color: rgba(0, 0, 0, 0.1);
            }

            /* Alternative: zebra columns */
            .zebra-columns td:nth-child(odd),
            .zebra-columns th:nth-child(odd) {
            background-color: rgba(0, 0, 0, 0.05);
            }

            .zebra-columns td:nth-child(even),
            .zebra-columns th:nth-child(even) {
            background-color: rgba(0, 0, 0, 0.02);
            }

When to Use Column Striping

Use Cases for Column Striping

Financial data: Compare columns side by side
Statistical tables: Highlight data patterns
Comparison tables: Differentiate between categories
Wide tables: Help track data across many columns
Data-heavy applications: Improve data scanning

Column vs Row Striping

Aspect	Row Striping	Column Striping
Primary Use	Reading across rows	Comparing columns
Best For	Long lists, sequential data	Wide tables, comparisons
Bootstrap Support	Native (`.table-striped`)	Custom CSS required
Accessibility	Good for screen readers	May be confusing
Mobile Friendly	Works well	Limited on small screens

Note: Column striping is not natively supported in Bootstrap and requires custom CSS. Use it sparingly as it can reduce readability on mobile devices.

Nested Tables with Stripes

Striped Nested Tables

Department

Manager

Team Size

Employees

Engineering

John Smith

Name	Role	Join Date
Alice Johnson	Frontend Dev	2022-01-15
Bob Williams	Backend Dev	2021-08-22
Carol Davis	Full Stack	2023-03-10

Marketing

Jane Doe

Name	Role	Join Date
Mike Brown	Content Writer	2022-05-20
Emma Wilson	SEO Specialist	2021-11-15
David Lee	Social Media	2023-01-30

Tip: When using nested tables, ensure each nested table has its own <thead> and <tbody> for proper structure and styling.

Custom Striped Table Styles

Custom Stripe Colors

#	Project	Progress	Deadline
1	Website Redesign	75%	2023-11-15
2	Mobile App	45%	2023-12-20
3	API Development	90%	2023-10-30
4	Database Migration	30%	2024-01-15

/* Custom stripe colors */
            .custom-striped tbody tr:nth-of-type(odd) {
            background-color: #f0f8ff; /* Light blue */
            }

            .custom-striped tbody tr:nth-of-type(even) {
            background-color: #e6f7ff; /* Slightly darker blue */
            }

            .custom-striped tbody tr:hover {
            background-color: #d1ecf1; /* Hover color */
            }

            /* Custom stripe width */
            .thick-stripes tbody tr:nth-of-type(odd) {
            background-color: rgba(13, 110, 253, 0.1);
            border-top: 2px solid #0d6efd;
            border-bottom: 2px solid #0d6efd;
            }

Alternate Stripe Patterns

Group	Member	Score	Rank
Team A	John	95	1
	Jane	88	3
	Bob	92	2
Team B	Alice	85	4
Team B	Charlie	80	5

/* Alternate stripe patterns */

            /* Group-based striping */
            .alternate-stripes tbody tr:nth-of-type(4n+1),
            .alternate-stripes tbody tr:nth-of-type(4n+2) {
            background-color: rgba(13, 110, 253, 0.05);
            }

            .alternate-stripes tbody tr:nth-of-type(4n+3),
            .alternate-stripes tbody tr:nth-of-type(4n+4) {
            background-color: rgba(108, 117, 125, 0.05);
            }

            /* Checkerboard pattern */
            .checkerboard tbody tr:nth-of-type(odd) td:nth-of-type(odd),
            .checkerboard tbody tr:nth-of-type(even) td:nth-of-type(even) {
            background-color: rgba(0, 0, 0, 0.05);
            }

Accessibility Considerations

Striped Tables and Accessibility

Accessibility Guidelines

Contrast ratio: Ensure stripes have sufficient contrast with text
Color blindness: Test with color blindness simulators
Screen readers: Stripes don't affect screen reader navigation
Focus indicators: Maintain visible focus for interactive elements
Reduced motion: Consider users with motion sensitivity
Customization: Allow users to toggle stripes if needed

Good Practice: Striped tables generally improve accessibility by making it easier to track rows, but ensure the contrast is adequate.

Testing Striped Tables

Testing Checklist

✅ Test on different screen sizes
✅ Check contrast ratios with accessibility tools
✅ Test with screen readers
✅ Verify hover states work correctly
✅ Test printing with stripes
✅ Check performance with large tables
✅ Test on different browsers
✅ Verify mobile touch interactions
✅ Test with high contrast modes
✅ Check color blindness simulations

Best Practices for Striped Tables

When to Use Striped Tables

✅ Tables with more than 5 rows of data
✅ Data that needs to be scanned horizontally
✅ Lists with similar-looking data
✅ Tables with many columns
✅ Data-heavy applications and dashboards
✅ When readability is a priority

When to Avoid Striped Tables

❌ Tables with very few rows (2-3)
❌ When using rowspan/colspan extensively
❌ Tables with already strong visual hierarchy
❌ When colors conflict with brand guidelines
❌ On very small mobile screens where space is limited

Performance Considerations

✅ Striped tables have minimal performance impact
✅ CSS-based striping is more efficient than JavaScript
✅ Consider virtual scrolling for very large striped tables
✅ Test performance on low-end devices
✅ Avoid complex nested striped tables

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