Default Table
Use table class to show bootstrap-based default table.
Striped Rows
Use table-striped class to add zebra-striping to any table row within the <tbody>.
| ID | Customer | Date | Invoice | Action |
|---|---|---|---|---|
| 01 | Bobby Davis | Nov 14, 2021 | $2,410 | Confirmed |
| 02 | Christopher Neal | Nov 21, 2021 | $1,450 | Waiting |
| 03 | Monkey Karry | Nov 24, 2021 | $3,500 | Confirmed |
| 04 | Aaron James | Nov 25, 2021 | $6,875 | Cancelled |
Striped columns
Tables Colors
Use table-dark class to set dark color table body and table-success class to set success color table body respectively. use table- class with different color variation to set required table body color.
| ID | Customer | Date | Invoice |
|---|---|---|---|
| 01 | Bobby Davis | Nov 14, 2021 | $2,410 |
| 02 | Christopher Neal | Nov 21, 2021 | $1,450 |
| 03 | Monkey Karry | Nov 24, 2021 | $3,500 |
| 04 | Aaron James | Nov 25, 2021 | $6,875 |
Hoverable Rows
Use table-hover class to enable a hover state on table rows within a <tbody>.
| ID | Invoice | Amount | Date | Status | Action |
|---|---|---|---|---|---|
| 01 | Basic Plan | $860 | Nov 22, 2021 | Subscribed |
|
| 02 | Premium Plan | $1200 | Nov 10, 2021 | Unsubscribed |
|
| 03 | Basic Plan | $860 | Nov 19, 2021 | Subscribed |
|
| 04 | Corporate Plan | $1599 | Nov 22, 2021 | Subscribed |
|
Card Tables
Bordered Tables
Use table-bordered class to show borders on all sides of the table and cells.
Tables Border Colors
Use border- class with color variation class to set table border color.
Tables Without Borders
Use table-borderless to set a table without borders.
Small Tables
Use table-sm class to create any table more compact by cutting all cell padding in half.
| ID | Title | Status | Assignee |
|---|---|---|---|
| 01 | Implement new UX | Backlog | Lanora Sandoval |
| 02 | Design syntax | In Progress | Calvin Garrett |
| 03 | Configurable resources | Done | Florence Guzman |
| 04 | Implement extensions | Backlog | Maritza Blanda |
| 05 | Applications Engineer | Done | Leslie Alexander |
Table Foot
Add <tbody> attribute to group footer content in an HTML table.
| ID | Name | Job Title | Date | Payment |
|---|---|---|---|---|
| 01 | Annette Black | Industrial Designer | 10, Nov 2021 | $450 |
| 02 | Bessie Cooper | Graphic Designer | 13, Nov 2021 | $875 |
| 03 | Leslie Alexander | Product Manager | 17, Nov 2021 | $410 |
| Total | $940 | |||
Captions
You can also put the <caption> attribute on the top of the table with caption-top class.
| ID | Student | Course | Author |
|---|---|---|---|
| 01 | Milana Scot | UI/UX design | Mitchell Flores |
| 02 | Jassica Welsh | 3d Animation | Dan Evgeni |
| 03 | Leslie Alexander | Logotype Design | Olimpia Jordan |
Table Nesting
Example of basic table nesting. Border styles, active styles, and table variants are not inherited by nested tables.
| ID | Name | Job Title | Date | Payment | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 01 | Annette Black | Industrial Designer | 10, Nov 2021 | $450 | ||||||||||||
|
||||||||||||||||
| 02 | Bessie Cooper | Graphic Designer | 13, Nov 2021 | $875 | ||||||||||||
| 03 | Leslie Alexander | Product Manager | 16, Nov 2021 | $410 | ||||||||||||
| 04 | Bettie Johson | Applications Engineer | 24, Nov 2021 | $620 | ||||||||||||
| 05 | Monkey Karry | Implement new UX | 25, Nov 2021 | $795 | ||||||||||||
Variants
Use table- class with below-mentioned color variation class within <tr> to set color on table row.
| # | Name | Position | Department |
|---|---|---|---|
| Default | Monkey Karry | Medical Specialist | Orthopedics |
| Primary | James White | Medical Assistant | Surgery |
| Secondary | Aaron James | Medical Specialist | Neurology |
| Success | Bettie Johson | Medical Specialist | Cardiology |
| Danger | Bessie Cooper | Medical Assistant | Surgery |
| Warning | Lenora Sandoval | Medical Assistant | Cardiology |
| Info | Eric Pierce | Medical Specialist | Neurology |
| Light | Ruth Zimmermann | Medical Specialist | Neurology |
| Dark | Leslie Alexander | Medical Assistant | Cardiology |
Vertical alignment
Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the the top by default. Use the vertical align classes to re-align where needed.
| Heading | Heading | Heading | Heading |
|---|---|---|---|
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default. |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
This cell inherits vertical-align: bottom; from the table row |
This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default. |
This cell inherits vertical-align: middle; from the table |
This cell inherits vertical-align: middle; from the table |
This cell is aligned to the top. | This here is some placeholder text, intended to take up quite a bit of vertical space, to demonstrate how the vertical alignment works in the preceding cells. Use the vertical align classes to re-align where needed. inherit their alignment from and are aligned to the the top by default. |
Responsive Tables
Use table-responsive class to make any table responsive across all viewports. Responsive tables allow tables to be scrolled horizontally with ease.
|
|
ID | Date | Status | Customer | Purchased | Revenue |
|---|---|---|---|---|---|---|
|
|
#VZ2110 | 10 Oct, 14:47 | Paid |
Jordan Kennedy
|
Mastering the grid | $9.98 |
|
|
#VZ2109 | 17 Oct, 02:10 | Paid |
Jackson Graham
|
Splashify | $270.60 |
|
|
#VZ2108 | 26 Oct, 08:20 | Refunded |
Lauren Trujillo
|
Wireframing Kit for Figma | $145.42 |
|
|
#VZ2107 | 02 Nov, 04:52 | Cancel |
Curtis Weaver
|
Wireframing Kit for Figma | $170.68 |
|
|
#VZ2106 | 10 Nov, 07:20 | Paid |
Jason schuller
|
Splashify | $350.87 |
| Total | $947.55 | |||||