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
|