Basic Tables

Basic example

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

CompnyBillAverage BillPaid BillAction
Micromin4$250$800
ZZ Diamond2$180$400
Dairy Sweet6$210$500
Corner Tea3$80$350

Bordered table

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

Transaction IDDatePriceOrder StatusAction
#12478125/11/2018$321Approved
#54213619/11/2018$227Approved
#23457811/10/2018$442Rejected
#95135703/12/2018$625Approved

Striped rows

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

CustomerEmailContact NoAction
Aaron PoulinAaronPoulin@example.com+21 21547896
Richard AliRichardAli@example.com+41 21547896
Juan ClarkJuanClark@example.com+65 21547896
Albert HullAlbertHull@example.com+88 21547896

Table head options

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

#NameEmailAccess
1MarkXYZ@Example.comBusiness
2JacobXYZ@Example.comPersonal
3LarryXYZ@Example.comDisabled
4MarkXYZ@Example.comBusiness
5JacobXYZ@Example.comPersonal

Hoverable rows

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

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Light table

Your awesome text goes here.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Contextual classes

Use contextual classes to color table rows or individual cells.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
4MarkOtto@mdo
5JacobThornton@fat
6Larrythe Bird@twitter
7JacobThornton@fat
8Larrythe Bird@twitter
9JacobThornton@fat
10Larrythe 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 NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
Small table

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

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
© 2019 Frogetor Crafted with by Mannatthemes