Basic Table
Basic Table
Use table class on a table element to create a basic table.
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook Pro 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
Striped Table Rows
Use table-striped class to create a striped table.
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook Pro 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
Striped Table Columns
Use
table-striped-columns
class to create a striped table columns.
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook Pro 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
Hoverable Table Rows
User
table-hover
class to enable a hover state on table rows within
<tbody>
.
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook Pro 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
Bordered Table
Use
table-bordered
class to add borders on all sides of the table and cells.
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook Pro 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
Borderless Table
Use
table-borderless
class to remove borders on all sides of the table and cells.
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook Pro 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
Responsive Table
Use
table-responsive
class to wrap tables for horizontally scrolling.
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook Pro 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
Table With Footer
Example of table with footer.
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
| Total | $10000 | |||||
Compact Table
Use
table-compact
class to make any
<table>
more compact by cutting all cell padding in half.
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
Color Table
Use contextual classes with base
table
class to color tables. Example:
table-primary
,
table-secondary
,
table-success
,
table-danger
,
table-warning
,
table-info
,
table-dark
.
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |
| ID | Product name | Color | Catagory | Available | Qty | Price |
|---|---|---|---|---|---|---|
| 01 | Apple MacBook 17" | White | Laptop | Yes | 1 | $2999 |
| 02 | LG22MK600 21.5" Monitor | Black | Monitor | Yes | 1 | $1999 |
| 03 | Magic Mouse 2 | Sliver | Accessories | No | 1 | $99 |