extends ../../_layout/default.pug
block canonical
link(rel='canonical' href='https://coreui.io/docs/content/tables/')
block breadcrumb
+breadcrumb(
[
{ href: '#', label: 'Home'},
{ label: 'Components'},
{ label: 'Base'},
'Tables'
],
)
block view
+docs-components('https://coreui.io/docs/components/tables/')
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Basic example
.card-body
p.text-body-secondary.small
| Using the most basic table markup, here’s how
code .table
| -based tables look in Bootstrap.
+example('https://coreui.io/docs/content/tables/#overview')
table.table
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Variants
.card-body
p.text-body-secondary.small Use contextual classes to color tables, table rows or individual cells.
+example('https://coreui.io/docs/content/tables/#variants')
table.table
thead
tr
th(scope='col') Class
th(scope='col') Heading
th(scope='col') Heading
tbody
tr
th(scope='row') Default
td Cell
td Cell
tr.table-primary
th(scope='row') Primary
td Cell
td Cell
tr.table-secondary
th(scope='row') Secondary
td Cell
td Cell
tr.table-success
th(scope='row') Success
td Cell
td Cell
tr.table-danger
th(scope='row') Danger
td Cell
td Cell
tr.table-warning
th(scope='row') Warning
td Cell
td Cell
tr.table-info
th(scope='row') Info
td Cell
td Cell
tr.table-light
th(scope='row') Light
td Cell
td Cell
tr.table-dark
th(scope='row') Dark
td Cell
td Cell
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Striped rows
.card-body
p.text-body-secondary.small
| Use
code .table-striped
| to add zebra-striping to any table row within the
code
= '<tbody>'
| .
+example('https://coreui.io/docs/content/tables/#striped-rows')
table.table.table-striped
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
p.text-body-secondary.small These classes can also be added to table variants:
+example('https://coreui.io/docs/content/tables/#striped-rows')
table.table.table-dark.table-striped
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
+example('https://coreui.io/docs/content/tables/#striped-rows')
table.table.table-success.table-striped
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Hoverable rows
.card-body
p.text-body-secondary.small
| Add
code .table-hover
| to enable a hover state on table rows within a
code
= '<tbody>'
| .
+example('https://coreui.io/docs/content/tables/#hoverable-rows')
table.table.table-hover
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
+example('https://coreui.io/docs/content/tables/#hoverable-rows')
table.table.table-dark.table-hover
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
p.text-body-secondary.small These hoverable rows can also be combined with the striped variant:
+example('https://coreui.io/docs/content/tables/#hoverable-rows')
table.table.table-striped.table-hover
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Active tables
.card-body
p.text-body-secondary.small
| Highlight a table row or cell by adding a
code .table-active
| class.
+example('https://coreui.io/docs/content/tables/#active-tables')
table.table
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr.table-active
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td.table-active(colspan='2') Larry the Bird
td @twitter
+example('https://coreui.io/docs/content/tables/#active-tables')
table.table.table-dark
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr.table-active
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td.table-active(colspan='2') Larry the Bird
td @twitter
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Bordered tables
.card-body
p.text-body-secondary.small
| Add
code .table-bordered
| for borders on all sides of the table and cells.
+example('https://coreui.io/docs/content/tables/#bordered-tables')
table.table.table-bordered
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
p.text-body-secondary.small
a(href='https://coreui.io/docs/utilities/borders/#border-color') Border color utilities
| can be added to change colors:
+example('https://coreui.io/docs/content/tables/#bordered-tables')
table.table.table-bordered.border-primary
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Tables without borders
.card-body
p.text-body-secondary.small
| Add
code .table-borderless
| for a table without borders.
+example('https://coreui.io/docs/content/tables/#tables-without-borders')
table.table.table-borderless
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
+example('https://coreui.io/docs/content/tables/#tables-without-borders')
table.table.table-dark.table-borderless
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Small tables
.card-body
p.text-body-secondary.small
| Add
code .table-sm
| to make any
code .table
| more compact by cutting all cell
code padding
| in half.
+example('https://coreui.io/docs/content/tables/#small-tables')
table.table.table-sm
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
+example('https://coreui.io/docs/content/tables/#small-tables')
table.table.table-dark.table-sm
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Vertical alignment
.card-body
p.text-body-secondary.small
| Table cells of
code
= '<thead>'
| are always vertical aligned to the bottom. Table cells in
code
= '<tbody>'
| inherit their alignment from
code
= '<table>'
| and are aligned to the the top by default. Use the
a(href='https://coreui.io/docs/utilities/vertical-align/') vertical align
| classes to re-align where needed.
+example('https://coreui.io/docs/content/tables/#vertical-alignment')
.table-responsive
table.table.align-middle
thead
tr
th.w-25(scope='col') Heading 1
th.w-25(scope='col') Heading 2
th.w-25(scope='col') Heading 3
th.w-25(scope='col') Heading 4
tbody
tr
td
| This cell inherits
code vertical-align: middle;
| from the table
td
| This cell inherits
code vertical-align: middle;
| from the table
td
| This cell inherits
code vertical-align: middle;
| from the table
td
| 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.
tr.align-bottom
td
| This cell inherits
code vertical-align: bottom;
| from the table row
td
| This cell inherits
code vertical-align: bottom;
| from the table row
td
| This cell inherits
code vertical-align: bottom;
| from the table row
td
| 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.
tr
td
| This cell inherits
code vertical-align: middle;
| from the table
td
| This cell inherits
code vertical-align: middle;
| from the table
td.align-top This cell is aligned to the top.
td
| 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.
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Nesting
.card-body
p.text-body-secondary.small
| Border styles, active styles, and table variants are not inherited by nested tables.
+example('https://coreui.io/docs/content/tables/#nesting')
table.table.table-striped.table-bordered
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
td(colspan='4')
table.table.mb-0
thead
tr
th(scope='col') Header
th(scope='col') Header
th(scope='col') Header
tbody
tr
th(scope='row') A
td First
td Last
tr
th(scope='row') B
td First
td Last
tr
th(scope='row') C
td First
td Last
tr
th(scope='row') 3
td Larry
td the Bird
td @twitter
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Table head
.card-body
p.text-body-secondary.small
| Similar to tables and dark tables, use the modifier classes
code .table-light
| or
code .table-dark
| to make
code
= '<thead>'
| s appear light or dark gray.
+example('https://coreui.io/docs/content/tables/#table-head')
table.table
thead.table-light
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td Larry
td the Bird
td @twitter
+example('https://coreui.io/docs/content/tables/#table-head')
table.table
thead.table-dark
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td Larry
td the Bird
td @twitter
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Table foot
.card-body
+example('https://coreui.io/docs/content/tables/#table-foot')
table.table
thead.table-light
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td Larry
td the Bird
td @twitter
tfoot
tr
td Footer
td Footer
td Footer
td Footer
.card.mb-4
.card-header
strong Tables
span.small.ms-1 Captions
.card-body
p.text-body-secondary.small
| A
code
= '<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.
+example('https://coreui.io/docs/content/tables/#captions')
table.table
caption List of users
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td(colspan='2') Larry the Bird
td @twitter
p.text-body-secondary.small
| You can also put the
code
= '<caption>'
| on the top of the table with
code .caption-top
| .
+example('https://coreui.io/docs/content/tables/#captions')
table.table.caption-top
caption List of users
thead
tr
th(scope='col') #
th(scope='col') First
th(scope='col') Last
th(scope='col') Handle
tbody
tr
th(scope='row') 1
td Mark
td Otto
td @mdo
tr
th(scope='row') 2
td Jacob
td Thornton
td @fat
tr
th(scope='row') 3
td Larry
td the Bird
td @twitter
