My Website > Elements

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

Row	First Name	Last Name	Email
1	John	Carter	[email protected]
2	Peter	Parker	[email protected]
3	John	Rambo	[email protected]
4	Juna	Doe	[email protected]
5	Alea	Smith	[email protected]
6	Resa	Parker	[email protected]

Tables with Alternate Background (striped)

Row	First Name	Last Name	Email
1	John	Carter	[email protected]
2	Peter	Parker	[email protected]
3	John	Rambo	[email protected]
4	Juna	Doe	[email protected]
5	Alea	Smith	[email protected]
6	Resa	Parker	[email protected]

Table with Borders

Row	First Name	Last Name	Email
1	John	Carter	[email protected]
2	Peter	Parker	[email protected]
3	John	Rambo	[email protected]
4	Juna	Doe	[email protected]
5	Alea	Smith	[email protected]
6	Resa	Parker	[email protected]

Hover State on Table Rows

Row	First Name	Last Name	Email
1	John	Carter	[email protected]
2	Peter	Parker	[email protected]
3	John	Rambo	[email protected]
4	Juna	Doe	[email protected]
5	Alea	Smith	[email protected]
6	Resa	Parker	[email protected]

Condensed Table

Row	First Name	Last Name	Email
1	John	Carter	[email protected]
2	Peter	Parker	[email protected]
3	John	Rambo	[email protected]
4	Juna	Doe	[email protected]
5	Alea	Smith	[email protected]
6	Resa	Parker	[email protected]

Emphasis Classes on Table Rows

Class	Description
`.active`	Applies the hover color to a particular row or cell
`.success`	Indicates a successful or positive action
`.info`	Indicates a neutral informative change or action
`.warning`	Indicates a warning that might need attention
`.danger`	Indicates a dangerous or potentially negative action

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