{{#> 
	layouts/main 
	title="Basic Tables" 
	pagename="tables_basic" 
	heading="<i class='fal fa-th-list text-primary'></i>  Basic tables" 
	category_1="Tables" 
	pagedescription="Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap."
}}

{{#*inline "head-block"}}{{/inline}}

{{#*inline "content-block"}}

<div class="row">
	<div class="col-lg-12 col-xl-6">
		<!--Basic tables-->
		<div id="panel-1" class="panel">
			<div class="panel-hdr">	
				<h2>
					Basic <span class="fw-300"><i>Tables</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						Using the most basic table markup, here’s how <code>.table</code>-based tables look in {{app}}. You can inverse a table by using the class <code>.table-dark</code>
					</div>
					<h5 class="frame-heading">
						Default
					</h5>
					<div class="frame-wrap">
						<table class="table m-0">
							<thead>
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Mark</td>
									<td>Otto</td>
									<td>@mdo</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Jacob</td>
									<td>Thornton</td>
									<td>@fat</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
								<tr>
									<th scope="row">4</th>
									<td colspan="2">Larry the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h5 class="frame-heading">
						Inverse
					</h5>
					<div class="frame-wrap">
						<table class="table table-dark m-0">
							<thead>
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Mark</td>
									<td>Otto</td>
									<td>@mdo</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Jacob</td>
									<td>Thornton</td>
									<td>@fat</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>		
		<!--Table head-->
		<div id="panel-2" class="panel">
			<div class="panel-hdr">	
				<h2>
					Table <span class="fw-300"><i>head</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						Similar to default and inverse tables, use one of two modifier classes to make <code>&lt;thead&gt;</code>s appear custom, dark gray, white and themed.
					</div>
					<h5 class="frame-heading">
						Inverse
					</h5>
					<div class="frame-wrap">
						<table class="table m-0">
							<thead class="thead-dark">
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Mark</td>
									<td>Otto</td>
									<td>@mdo</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Jacob</td>
									<td>Thornton</td>
									<td>@fat</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h5 class="frame-heading">
						Custom <a href="utilities_color_pallet.html" title="Color Pallets"><i class="{{iconPrefix}} fa-reply"></i> </a>
					</h5>
					<div class="frame-wrap">
						<table class="table m-0">
							<thead class="bg-fusion-50">
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Mark</td>
									<td>Otto</td>
									<td>@mdo</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Jacob</td>
									<td>Thornton</td>
									<td>@fat</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h5 class="frame-heading">
						Dark
					</h5>
					<div class="frame-wrap">
						<table class="table m-0">
							<thead class="thead-dark">
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Mark</td>
									<td>Otto</td>
									<td>@mdo</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Jacob</td>
									<td>Thornton</td>
									<td>@fat</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h5 class="frame-heading">
						Themed
					</h5>
					<div class="frame-wrap">
						<table class="table m-0">
							<thead class="thead-themed">
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Mark</td>
									<td>Otto</td>
									<td>@mdo</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Jacob</td>
									<td>Thornton</td>
									<td>@fat</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>		
		<!--Table rows-->
		<div id="panel-3" class="panel">
			<div class="panel-hdr">	
				<h2>
					Table <span class="fw-300"><i>rows</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						Add <code>.table-striped</code> to add zebra-striping to any table, and add <code>.table-dark</code> for inverse pattern
					</div>
					<h5 class="frame-heading">
						Pattern
					</h5>
					<div class="frame-wrap">
						<table class="table table-striped m-0">
							<thead>
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Mark</td>
									<td>Otto</td>
									<td>@mdo</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Jacob</td>
									<td>Thornton</td>
									<td>@fat</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h5 class="frame-heading">
						Pattern inverse
					</h5>
					<div class="frame-wrap">
						<table class="table table-striped table-dark m-0">
							<thead>
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Mark</td>
									<td>Otto</td>
									<td>@mdo</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Jacob</td>
									<td>Thornton</td>
									<td>@fat</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>		
	</div>
	<div class="col-lg-12 col-xl-6">
		<!--Table bordered-->
		<div id="panel-4" class="panel">
			<div class="panel-hdr">	
				<h2>
					Table <span class="fw-300"><i>Bordered</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						Add <code>.table-bordered</code> for borders on all sides of the table and cells.
					</div>
					<table class="table table-bordered m-0">
						<thead>
							<tr>
								<th>#</th>
								<th>First Name</th>
								<th>Last Name</th>
								<th>Username</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th scope="row">1</th>
								<td>Mark</td>
								<td>Otto</td>
								<td>@mdo</td>
							</tr>
							<tr>
								<th scope="row">2</th>
								<td>Mark</td>
								<td>Otto</td>
								<td>@TwBootstrap</td>
							</tr>
							<tr>
								<th scope="row">3</th>
								<td>Jacob</td>
								<td>Thornton</td>
								<td>@fat</td>
							</tr>
							<tr>
								<th scope="row">4</th>
								<td colspan="2">Larry the Bird</td>
								<td>@twitter</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>		
		<!--Table hover-->
		<div id="panel-5" class="panel">
			<div class="panel-hdr">	
				<h2>
					Table <span class="fw-300"><i>Hover</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						Add <code>.table-hover</code> to enable a hover state on table rows within a <code>&lt;tbody&gt;</code>
					</div>
					<h5 class="frame-heading">
						Hoverable
					</h5>
					<div class="frame-wrap">
						<table class="table table-bordered table-hover m-0">
							<thead class="thead-themed">
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Jhon</td>
									<td>Stone</td>
									<td>@jhon</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Lisa</td>
									<td>Nilson</td>
									<td>@lisa</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h5 class="frame-heading">
						Inverse
					</h5>
					<div class="frame-wrap">
						<table class="table table-bordered table-hover table-dark m-0">
							<thead class="thead-themed">
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Jhon</td>
									<td>Stone</td>
									<td>@jhon</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Lisa</td>
									<td>Nilson</td>
									<td>@lisa</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>		
		<!--Contextual classes-->
		<div id="panel-6" class="panel">
			<div class="panel-hdr">	
				<h2>
					Contextual <span class="fw-300"><i>classes</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						Use contextual classes to color table rows or individual cells. See the full list of <a href="utilities_color_pallet.html" title="Color Pallets" target="_blank">color selection</a>
					</div>
					<table class="table m-0">
						<thead>
							<tr>
								<th>#</th>
								<th>First Name</th>
								<th>Last Name</th>
								<th>Username</th>
							</tr>
						</thead>
						<tbody>
							<tr class="active">
								<th scope="row">1</th>
								<td>Lisa</td>
								<td>Nilson</td>
								<td>@lisa</td>
							</tr>
							<tr class="bg-primary-400">
								<th scope="row">2</th>
								<td>Lisa</td>
								<td>Nilson</td>
								<td>@lisa</td>
							</tr>
							<tr class="bg-success-100">
								<th scope="row">3</th>
								<td>Nick</td>
								<td>looper</td>
								<td>@king</td>
							</tr>
							<tr class="bg-info-500">
								<th scope="row">4</th>
								<td>Joan</td>
								<td>thestar</td>
								<td>@joan</td>
							</tr>
							<tr class="bg-warning-500">
								<th scope="row">5</th>
								<td>Sean</td>
								<td>coder</td>
								<td>@coder</td>
							</tr>
							<tr class="bg-danger-500">
								<th scope="row">6</th>
								<td>Sean</td>
								<td>coder</td>
								<td>@coder</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>		
		<!--Table small-->
		<div id="panel-7" class="panel">
			<div class="panel-hdr">	
				<h2>
					Table <span class="fw-300"><i>Small</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						Add <code> .table-sm</code> to make tables more compact by cutting cell padding in half. See the full list of <a href="utilities_color_pallet.html" title="Color Pallets">color selection</a> to add backgrounds as well
					</div>
					<h5 class="frame-heading">
						Compact
					</h5>
					<div class="frame-wrap">
						<table class="table table-sm m-0">
							<thead class="bg-primary-500">
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Mark</td>
									<td>Otto</td>
									<td>@mdo</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Jacob</td>
									<td>Thornton</td>
									<td>@fat</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td colspan="2">Larry the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
					<h5 class="frame-heading">
						With background
					</h5>
					<div class="frame-wrap">
						<table class="table table-sm bg-info-900 table-bordered m-0">
							<thead class="bg-info-500">
								<tr>
									<th>#</th>
									<th>First Name</th>
									<th>Last Name</th>
									<th>Username</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Mark</td>
									<td>Otto</td>
									<td>@mdo</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Jacob</td>
									<td>Thornton</td>
									<td>@fat</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td colspan="2">Larry the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>		
		<!--Table responsive-->
		<div id="panel-8" class="panel">
			<div class="panel-hdr">	
				<h2>
					Table <span class="fw-300"><i>Responsive</i></span> 
				</h2>
				<div class="panel-toolbar">
					<button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
					<button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
					<button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
				</div>
			</div>
			<div class="panel-container show">
				<div class="panel-content">									
					<div class="panel-tag">
						Make table responsive with <code>.table-responsive</code>. Maximum breakpoint can be applied by adding <code>.table-responsive-sm</code>,  <code>.table-responsive-ms</code>,  <code>.table-responsive-lg</code>,  <code>.table-responsive-xl</code>
					</div>
					<div class="table-responsive-lg">
						<table class="table table-bordered m-0">
							<thead>
								<tr>
									<th>#</th>
									<th>Table heading</th>
									<th>Table heading</th>
									<th>Table heading</th>
									<th>Table heading</th>
									<th>Table heading</th>
									<th>Table heading</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<th scope="row">1</th>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
								</tr>
								<tr>
									<th scope="row">2</th>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
								</tr>
								<tr>
									<th scope="row">3</th>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
									<td>Table cell</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>		
	</div>
</div>

{{/inline}}

{{#*inline "scripts-block"}}{{/inline}}

{{/layouts/main}}