Tables

Delivering Innovation

TABLES

You can create tables with basic styling that has horizontal dividers and small cell padding (8px by default),
by just adding the Bootstrap's class .table to the (table) element.

Basic Table
RowFirst NameLast NameEmail
1JohnCarter[email protected]
2PeterParker[email protected]
3JohnRambo[email protected]
4JunaDoe[email protected]
5AleaSmith[email protected]
6ResaParker[email protected]

Tables with Alternate Background (striped)
RowFirst NameLast NameEmail
1JohnCarter[email protected]
2PeterParker[email protected]
3JohnRambo[email protected]
4JunaDoe[email protected]
5AleaSmith[email protected]
6ResaParker[email protected]

Table with Borders
RowFirst NameLast NameEmail
1JohnCarter[email protected]
2PeterParker[email protected]
3JohnRambo[email protected]
4JunaDoe[email protected]
5AleaSmith[email protected]
6ResaParker[email protected]

Hover State on Table Rows
RowFirst NameLast NameEmail
1JohnCarter[email protected]
2PeterParker[email protected]
3JohnRambo[email protected]
4JunaDoe[email protected]
5AleaSmith[email protected]
6ResaParker[email protected]

Condensed Table
RowFirst NameLast NameEmail
1JohnCarter[email protected]
2PeterParker[email protected]
3JohnRambo[email protected]
4JunaDoe[email protected]
5AleaSmith[email protected]
6ResaParker[email protected]

Emphasis Classes on Table Rows
ClassDescription
.activeApplies the hover color to a particular row or cell
.successIndicates a successful or positive action
.infoIndicates a neutral informative change or action
.warningIndicates a warning that might need attention
.dangerIndicates a dangerous or potentially negative action

#Column headingColumn headingColumn heading
1Column contentColumn contentColumn content
2Column contentColumn contentColumn content
3Column contentColumn contentColumn content
4Column contentColumn contentColumn content
5Column contentColumn contentColumn content
6Column contentColumn contentColumn content
7Column contentColumn contentColumn content
8Column contentColumn contentColumn content
9Column contentColumn contentColumn content