Basic Tables
Default Tables
Use Table attribute 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 | |||||