##### Mannat Themes

We Design and Develop Clean and High Quality Web Applications

Upgrade your plan

#### Basic Tables

Today: Jan 11

#### Basic example

For basic styling—light padding and only horizontal dividers—add the base class `.table` to any `<table>`.

Compny | Bill | Average Bill | Paid Bill | Action
--- | --- | --- | --- | ---
Micromin | 4 | $250 | $800 |
ZZ Diamond | 2 | $180 | $400 |
Dairy Sweet | 6 | $210 | $500 |
Corner Tea | 3 | $80 | $350 |

#### Bordered table

Add `.table-bordered` for borders on all sides of the table and cells.

Transaction ID | Date | Price | Order Status | Action
--- | --- | --- | --- | ---
#124781 | 25/11/2018 | $321 | Approved |
#542136 | 19/11/2018 | $227 | Approved |
#234578 | 11/10/2018 | $442 | Rejected |
#951357 | 03/12/2018 | $625 | Approved |

#### Striped rows

Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.

Customer | Email | Contact No | Action
--- | --- | --- | ---
Aaron Poulin | Aaron@example.com | +21 21547896 |
Richard Ali | Richard@example.com | +41 21547896 |
Juan Clark | Juan@example.com | +65 21547896 |
Albert Hull | Albert@example.com | +88 21547896 |

#### Table head options

Use one of two modifier classes to make `<thead>`s appear light or dark gray.

# | Name | Email | Access
--- | --- | --- | ---
1 | Mark | XYZ@Example.com | Business
2 | Jacob | XYZ@Example.com | Personal
3 | Larry | XYZ@Example.com | Disabled
4 | Mark | XYZ@Example.com | Business
5 | Jacob | XYZ@Example.com | Personal

#### Hoverable rows

Use `.table-striped` to add zebra-striping to any table row within the `<tbody>`.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter

#### Dark table

Your awesome text goes here.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Contextual classes

Use contextual classes to color table rows or individual cells.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter
4 | Mark | Otto | @mdo
5 | Jacob | Thornton | @fat
6 | Larry | the Bird | @twitter
7 | Jacob | Thornton | @fat
8 | Larry | the Bird | @twitter
9 | Jacob | Thornton | @fat
10 | Larry | the Bird | @twitter

#### Captions Table

A `<caption>` functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.

List of users
# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry | the Bird | @twitter

#### Small table

Add `.table-sm` to make tables more compact by cutting cell padding in half.

# | First Name | Last Name | Username
--- | --- | --- | ---
1 | Mark | Otto | @mdo
2 | Jacob | Thornton | @fat
3 | Larry the Bird | @twitter