Basic Table
A collection basic to advanced table design that you can use to your data.
Basic Table
Using the most basic table markup.
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| 3 | Ashton Cox | Junior Technical Author | $86,000 |
|---|
| 4 | Cedric Kelly | Senior Javascript Developer | $433,060 |
|---|
| 5 | Airi Satou | Accountant | $162,700 |
|---|
Source Code
<table class="table"> <thead>..</thead> <tbody>...</tbody></table>
Striped Rows
Add zebra-striping to any table row.
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| 3 | Ashton Cox | Junior Technical Author | $86,000 |
|---|
| 4 | Cedric Kelly | Senior Javascript Developer | $433,060 |
|---|
| 5 | Airi Satou | Accountant | $162,700 |
|---|
Source Code
<table class="table table-striped"> <thead>..</thead> <tbody>...</tbody></table>
Bordered Table
Add borders on all sides of the table and cells.
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| 3 | Ashton Cox | Junior Technical Author | $86,000 |
|---|
| 4 | Cedric Kelly | Senior Javascript Developer | $433,060 |
|---|
| 5 | Airi Satou | Accountant | $162,700 |
|---|
Source Code
<table class="table table-bordered"> <thead>..</thead> <tbody>...</tbody></table>
Hoverable Rows
To enable a hover state on table rows.
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| 3 | Ashton Cox | Junior Technical Author | $86,000 |
|---|
| 4 | Cedric Kelly | Senior Javascript Developer | $433,060 |
|---|
| 5 | Airi Satou | Accountant | $162,700 |
|---|
Source Code
<table class="table table-hover"> <thead>..</thead> <tbody>...</tbody></table>
12 Color Variations for Table Header
A custom color for the head of the tables.
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
Source Code
<table class="table table-bordered"> <thead class="thead-colored thead-info">..</thead> <tbody>...</tbody></table>
Class Reference
| Class | Value |
|---|
class="thead-colored thead-[value]" | primary | success | warning | danger | info | teal | indigo | purple | pink | orange | light | dark |
12 Full Color Variations for Table
A custom full color variations for the entire table.
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| 3 | Ashton Cox | Junior Technical Author | $86,000 |
|---|
| 4 | Cedric Kelly | Senior Javascript Developer | $433,060 |
|---|
| 5 | Airi Satou | Accountant | $162,700 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| 3 | Ashton Cox | Junior Technical Author | $86,000 |
|---|
| 4 | Cedric Kelly | Senior Javascript Developer | $433,060 |
|---|
| 5 | Airi Satou | Accountant | $162,700 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| 3 | Ashton Cox | Junior Technical Author | $86,000 |
|---|
| 4 | Cedric Kelly | Senior Javascript Developer | $433,060 |
|---|
| 5 | Airi Satou | Accountant | $162,700 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
| ID | Name | Position | Salary |
|---|
| 1 | Tiger Nixon | System Architect | $320,800 |
|---|
| 2 | Garrett Winters | Accountant | $170,750 |
|---|
Source Code
<table class="table table-bordered table-primary"> <thead>..</thead> <tbody>...</tbody></table>
Class Reference
| Class | Value |
|---|
class="table table-[value]" | primary | success | warning | danger | info | teal | indigo | purple | pink | orange | light | dark |