Basic Tables

Basic tables

Basic table

Basic table with .table class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Striped rows table

Basic table with .table-striped class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Bordered table

Basic table with .table-bordered class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Hovered rows

Basic table with .table-hover class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Table Sizing

Extra large table

Basic table with .table-xlg class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Normal table

Basic table with .table class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Large table

Basic table with .table-lg class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Small table

Basic table with .table-sm class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Table borders

Vertical borders

Basic table with .table-columned class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Borderless table

Basic table with .table-borderless class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Table styling

Table header styling

Custom table header color with .bg-* class added to the header row.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Contextual classes

Custom table with contextual classes added to individual table rows. To use contextual classes, add classes .success, .info, .warning, .danger to the individual table rows

#	First Name	Last Name	Username	Status
1	Jane	Elliott	#jane	Active
2	Florence	Douglas	#florence	Inactive
3	Eugine	Turner	#eugine	Online
4	Ann	Porter	#ann	Blocked

Color combination with dark header

Custom table color with class .bg-* added to .table class and .bg-*-600 to <thead> row.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Table footer styling

Custom table footer color with .bg-* class added to the footer row.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Custom table color

Custom table color with class .bg-* added to .table class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann

Colored table options

Custom table with background color and added classes .table-striped and .table-hover with .table class.

#	First Name	Last Name	Username
1	Jane	Elliott	#jane
2	Florence	Douglas	#florence
3	Eugine	Turner	#eugine
4	Ann	Porter	#ann