Copyright 2024 by DNN Corp

Tables

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