Basic Tables
Default Table
Basic table with default styling
| # | Name | Position | Office |
|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh |
| 2 | Garrett Winters | Accountant | Tokyo |
| 3 | Ashton Cox | Junior Technical Author | San Francisco |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh |
| 5 | Airi Satou | Accountant | Tokyo |
Striped Table
Use .table-striped for zebra striping
| # | Name | Position | Office |
|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh |
| 2 | Garrett Winters | Accountant | Tokyo |
| 3 | Ashton Cox | Junior Technical Author | San Francisco |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh |
| 5 | Airi Satou | Accountant | Tokyo |
Hoverable Table
Use .table-hover for hover states
| # | Name | Position | Office |
|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh |
| 2 | Garrett Winters | Accountant | Tokyo |
| 3 | Ashton Cox | Junior Technical Author | San Francisco |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh |
| 5 | Airi Satou | Accountant | Tokyo |
Bordered Table
Use .table-bordered for borders on all sides
| # | Name | Position | Office |
|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh |
| 2 | Garrett Winters | Accountant | Tokyo |
| 3 | Ashton Cox | Junior Technical Author | San Francisco |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh |
| 5 | Airi Satou | Accountant | Tokyo |
Table Sizes
Small Table
Use .table-sm for compact spacing
| # | Name | Position | Office | Salary |
|---|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh | $320,800 |
| 2 | Garrett Winters | Accountant | Tokyo | $170,750 |
| 3 | Ashton Cox | Junior Technical Author | San Francisco | $86,000 |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | $162,700 |
| 6 | Brielle Williamson | Integration Specialist | New York | $372,000 |
Borderless Table
Use .table-borderless for no borders
| # | Name | Position | Office | Salary |
|---|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh | $320,800 |
| 2 | Garrett Winters | Accountant | Tokyo | $170,750 |
| 3 | Ashton Cox | Junior Technical Author | San Francisco | $86,000 |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh | $433,060 |
| 5 | Airi Satou | Accountant | Tokyo | $162,700 |
| 6 | Brielle Williamson | Integration Specialist | New York | $372,000 |
Table with User Cells
User Management Table
Table with avatars, status badges, and action buttons
| User | Role | Status | Last Active | Actions |
|---|---|---|---|---|
 Sarah Johnson sarah.johnson@example.com | Admin | Active | 2 min ago | |
 Michael Chen michael.chen@example.com | Editor | Active | 15 min ago | |
 Emily Davis emily.davis@example.com | Viewer | Pending | 1 hour ago | |
 David Wilson david.wilson@example.com | Editor | Inactive | 3 days ago | |
 Lisa Anderson lisa.anderson@example.com | Admin | Active | Just now |
Contextual Classes
Row Colors
Contextual classes for table rows
| Class | Description | Status |
|---|---|---|
.table-primary | Primary row style | Info |
.table-success | Success row style | Approved |
.table-warning | Warning row style | Pending |
.table-danger | Danger row style | Rejected |
.table-info | Info row style | Review |
.table-light | Light row style | Draft |
.table-dark | Dark row style | Archived |
Dark Table
Use .table-dark for dark theme
| # | Name | Position | Office |
|---|---|---|---|
| 1 | Tiger Nixon | System Architect | Edinburgh |
| 2 | Garrett Winters | Accountant | Tokyo |
| 3 | Ashton Cox | Junior Technical Author | San Francisco |
| 4 | Cedric Kelly | Senior Javascript Developer | Edinburgh |
| 5 | Airi Satou | Accountant | Tokyo |
Order Management Table
Recent Orders
Manage and track customer orders
| Order ID | Customer | Product | Date | Amount | Status | Actions | |
|---|---|---|---|---|---|---|---|
| #ORD-7245 |  James Rodriguez | MacBook Pro 16" | Jan 15, 2026 | $2,499.00 | Delivered | ||
| #ORD-7244 |  Emma Thompson | iPhone 15 Pro Max | Jan 14, 2026 | $1,199.00 | Processing | ||
| #ORD-7243 |  Robert Kim | AirPods Pro 2 | Jan 14, 2026 | $249.00 | Shipped | ||
| #ORD-7242 |  Sophia Martinez | Apple Watch Ultra 2 | Jan 13, 2026 | $799.00 | Cancelled | ||
| #ORD-7241 | William Brown | iPad Pro 12.9" | Jan 12, 2026 | $1,099.00 | Delivered |
Table with Progress & Nested Data
Project Progress Table
Table showing projects with progress indicators
| Project | Team | Progress | Deadline | Budget | Status |
|---|---|---|---|---|---|
Website Redesign UI/UX, Development | | 85% | Feb 28, 2026 | $45,000 | On Track |
Mobile App Development iOS, Android | | 45% | Apr 15, 2026 | $120,000 | At Risk |
Cloud Migration Infrastructure | | 100% | Jan 10, 2026 | $75,000 | Completed |
Data Analytics Platform Backend, ML | | 20% | Jun 30, 2026 | $200,000 | In Progress |
Security Audit Security | | 10% | Mar 15, 2026 | $35,000 | Delayed |
Table with Caption & Footer
Table with Caption
Use <caption> for table descriptions
| Name | Department | Salary |
|---|---|---|
| John Doe | Engineering | $85,000 |
| Jane Smith | Marketing | $72,000 |
| Bob Johnson | Sales | $68,000 |
| Alice Brown | HR | $65,000 |
Table with Footer
Use <tfoot> for summaries
| Product | Qty | Price | Total |
|---|---|---|---|
| Product A | 2 | $50.00 | $100.00 |
| Product B | 1 | $75.00 | $75.00 |
| Product C | 3 | $25.00 | $75.00 |
| Subtotal: | $250.00 | ||
| Tax (10%): | $25.00 | ||
| Grand Total: | $275.00 | ||
Empty State
Empty Table State
Display when no data is available
| Name | Status | Actions | |
|---|---|---|---|
No data availableThere are no records to display yet. | |||
Nested Table
Table within a table
| Category | Items | ||||||
|---|---|---|---|---|---|---|---|
| Electronics |
| ||||||
| Clothing |
|