Tables
CoreUI PRO hexagon
Our Admin Panel isn’t just a mix of third-party components. It’s the only Bootstrap dashboard built on a professional, enterprise-grade UI Components Library. This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
Explore Documentation
TablesBasic example

Using the most basic table markup, here’s how.table-based tables look in Bootstrap.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
TablesVariants

Use contextual classes to color tables, table rows or individual cells.

Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
TablesStriped rows

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

These classes can also be added to table variants:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
TablesHoverable rows

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

These hoverable rows can also be combined with the striped variant:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
TablesActive tables

Highlight a table row or cell by adding a.table-active class.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
TablesBordered tables

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

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Border color utilities can be added to change colors:

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
TablesTables without borders

Add.table-borderless for a table without borders.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
TablesSmall tables

Add.table-sm to make any.table more compact by cutting all cellpadding in half.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
TablesVertical 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 1 Heading 2 Heading 3 Heading 4
This cell inheritsvertical-align: middle; from the table This cell inheritsvertical-align: middle; from the table This cell inheritsvertical-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.
This cell inheritsvertical-align: bottom; from the table row This cell inheritsvertical-align: bottom; from the table row This cell inheritsvertical-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.
This cell inheritsvertical-align: middle; from the table This cell inheritsvertical-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.
TablesNesting

Border styles, active styles, and table variants are not inherited by nested tables.

# First Last Handle
1 Mark Otto @mdo
Header Header Header
A First Last
B First Last
C First Last
3 Larry the Bird @twitter
TablesTable head

Similar to tables and dark tables, use the modifier classes.table-light or.table-dark to make<thead>s appear light or dark gray.

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
TablesTable foot
# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Footer Footer Footer Footer
TablesCaptions

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 Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

You can also put the<caption> on the top of the table with.caption-top.

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