3

#### Basic Table

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class `.table` to any `table tag` , then extend with custom styles or our various included modifier classes.

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

#### Basic Dark Table

invert the colors—with light text on dark backgrounds—with `.table-dark`.

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

#### Light table Head

Similar to tables and dark tables, use the modifier classes `.thead-light` to make `thead` appear light

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
3 | Watch | 12-10-2019 | $30 | Not Delivered |

#### Dark Table Head

Similar to tables and dark tables, use the modifier classes `.thead-dark` to make `thead` appear Dark

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
3 | Watch | 12-10-2019 | $30 | Not Delivered |

#### Striped rows

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

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

#### Dark Striped Table

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

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
3 | Watch | 12-10-2019 | $30 | Not Delivered |

#### Light Bordered Table

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

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
3 | Watch | 12-10-2019 | $30 | Not Delivered |

#### Dark Bordered Table

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

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

#### Light Borderless Table

Add `.table-borderless` for a table without borders.

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

#### Dark Borderless Table

Add `.table-borderless` for a table without borders.

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
3 | Watch | 12-10-2019 | $30 | Not Delivered |

#### Light Hoverable Table

Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

#### Dark Hoverable Table

Add `.table-hover` to enable a hover state on table rows within a `<tbody>`.

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

#### Light Small Table

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

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

#### Dark Small Table

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

# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

#### Light Table With Contextual classes

Use contextual classes to color table rows or individual cells.

# | First | Last | Handle | Handle 2 | Handle 3 | Handle 4
--- | --- | --- | --- | --- | --- | ---
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
... | ... | ... | ... | ... | ... | ...

#### Dark Table With Background

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

# | First | Last | Handle | Handle 2 | Handle 3 | Handle 4
--- | --- | --- | --- | --- | --- | ---
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
1 | Mark | Otto | @mdo | @mdo | @mdo | @mdo
... | ... | ... | ... | ... | ... | ...

#### Light Table Caption

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
# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

#### Dark Table With Caption

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
# | Name | Avatar | Email | Status | Action
--- | --- | --- | --- | --- | ---
1 | Smith Doe |  | Smith@gmail.com | Active |
2 | Jhon Doe |  | Jhon@gmail.com | Pending |
3 | Alex |  | Otto@gmail.com | Not Active |

#### Light Responsive Table

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`.

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
3 | Watch | 12-10-2019 | $30 | Not Delivered |

#### Dark Responsive Table

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a `.table` with `.table-responsive`. Or, pick a maximum breakpoint with which to have a responsive table up to by using `.table-responsive{-sm|-md|-lg|-xl}`.

# | Product | Date | Price | Status | Action
--- | --- | --- | --- | --- | ---
1 | Watch | 12-10-2019 | $30 | Delivered |
2 | Iphone | 23-10-2019 | $300 | Pending |
3 | Watch | 12-10-2019 | $30 | Not Delivered |

Search results
Headphone 1

Gadget

$300 $400

Sale

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New

Headphone 1

Gadget

$300 $400

New