Use table class to show bootstrap-based default table.

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

Use .table-striped-columns to add zebra-striping to any table column.

Use table-card class to show card-based table within a <tbody>.

Use table-active class to highlight a table row or cell.

Use table-bordered class to show borders on all sides of the table and cells.

Use border- class with color variation class to set table border color.

Use table-borderless to set a table without borders.

Use table-sm class to create any table more compact by cutting all cell padding in half.

Use table-light or table-dark class to create <thead> appear light or dark.

Add <tbody> attribute to group footer content in an HTML table.

You can also put the <caption> attribute on the top of the table with caption-top class.

Example of basic table nesting. Border styles, active styles, and table variants are not inherited by nested tables.

Use table- class with below-mentioned color variation class within <tr> to set color on table row.

Table cells of <thead> are always vertical aligned to the bottom. Table cells in <tbody> inherit their alignment from <table> and are aligned to the the top by default. Use the vertical align classes to re-align where needed.

Use table-responsive class to make any table responsive across all viewports. Responsive tables allow tables to be scrolled horizontally with ease.

	ID	Date	Status	Customer	Purchased	Revenue
	#VZ2110	10 Oct, 14:47	Paid	Jordan Kennedy	Mastering the grid	$9.98
	#VZ2109	17 Oct, 02:10	Paid	Jackson Graham	Splashify	$270.60
	#VZ2108	26 Oct, 08:20	Refunded	Lauren Trujillo	Wireframing Kit for Figma	$145.42
	#VZ2107	02 Nov, 04:52	Cancel	Curtis Weaver	Wireframing Kit for Figma	$170.68
	#VZ2106	10 Nov, 07:20	Paid	Jason schuller	Splashify	$350.87
Total						$947.55