Angular Table Basic example

Using the most basic table CoreUI, here's how cTable-based tables look in CoreUI.

# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Angular Table Variants

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
Angular Table Striped rows

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

# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

These classes can also be added to table variants:

# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Angular Table Striped columns

Use stripedColumn property to add zebra-striping to any table column.

# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Angular Table Hoverable rows

Use [hover]="true" property to enable a hover state on table rows within a <tbody>.

# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Angular Table Active tables
# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Angular Table Bordered tables

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

# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Border color utilities can be added to change colors:

# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Angular Table Tables without borders

Add borderless property for a table without borders.

# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Angular Table Small tables

Add small property to make any cTable more compact by cutting all cell padding in half.

# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Angular Table Vertical alignment

Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from cTable and are aligned to the the top by default. Use the align property to re-align where needed.

Heading 1 Heading 2 Heading 3 Heading 4
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.
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.
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 demonsCTableRowate how the vertical alignment works in the preceding cells.
Angular Table Nesting

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

# Class Heading Heading
1 Mark Otto @mdo
Header Header Header
A First Last
B First Last
C First Last
3 Larry the Bird @twitter
Angular Table Table head

Similar to tables and dark tables, use the modifier prop color="light" or color="dark" to make <thead>s appear light or dark gray.

# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Angular Table Table foot
# Class Heading Heading
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Footer Footer Footer Footer
Angular Table Captions

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