Basic example

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

Compny	Bill	Average Bill	Paid Bill	Action
Micromin	4	$250	$800	Creat ProjectOpen ProjectTasks Details
ZZ Diamond	2	$180	$400	Creat ProjectOpen ProjectTasks Details
Dairy Sweet	6	$210	$500	Creat ProjectOpen ProjectTasks Details
Corner Tea	3	$80	$350	Creat ProjectOpen ProjectTasks Details

Bordered table

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

Striped rows

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

Customer	Email	Contact No	Action
Aaron Poulin	[email protected]	+21 21547896
Richard Ali	[email protected]	+41 21547896
Juan Clark	[email protected]	+65 21547896
Albert Hull	[email protected]	+88 21547896

Table head options

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

Hoverable rows

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

Dark table

Your awesome text goes here.

Contextual classes

Use contextual classes to color table rows or individual cells.

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.

Small table

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