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 |
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 |
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 |
