---
layout: app/app-layout
pagename: static-tables
---
<div class="title-block">
	<h1 class="title">
		Static Tables
	</h1>
	<p class="title-description">
		When blocks aren't enough
	</p>
</div>

<section class="section">
	<div class="row">

		{{!-- Basic example column --}}
		<div class="col-md-6">
			<div class="card">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Basic example
						</h3>
					</div>

					<section class="example">

						<table class="table">
							<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>

					</section>

				</div>
			</div>
		</div>


		{{!-- Striped table column --}}
		<div class="col-md-6">
			<div class="card">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Striped rows
						</h3>
					</div>

					<section class="example">

						<table class="table table-striped">
							<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>

					</section>

				</div>
			</div>
		</div>

	</div>
</section>


<section class="section">
	<div class="row">

		{{!-- Bordered table column --}}
		<div class="col-md-6">
			<div class="card">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Bordered
						</h3>
					</div>

					<section class="example">

						<table class="table table-bordered">
							<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>

					</section>

				</div>
			</div>
		</div>

		{{!-- Hover rows column --}}
		<div class="col-md-6">
			<div class="card">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Hover rows
						</h3>
					</div>

					<section class="example">

						<table class="table table-hover">
							<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>

					</section>

				</div>
			</div>
		</div>


	</div>
</section>

<section class="section">
	<div class="row">

		{{!-- Inverse  table column --}}
		<div class="col-md-6">
			<div class="card">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Inverse table
						</h3>
					</div>

					<section class="example">

						<table class="table table-inverse">
							<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>Larry</td>
									<td>the Bird</td>
									<td>@twitter</td>
								</tr>
							</tbody>
						</table>

					</section>

				</div>
			</div>
		</div>

		{{!-- Hover rows column --}}
		<div class="col-md-6">
			<div class="card">
				<div class="card-block">

					<div class="card-title-block">
						<h3 class="title">
							Small tables & Thead options
						</h3>
					</div>

					<section class="example">
						<p>Default thead</p>
						<table class="table table-sm">
							<thead class="thead-default">
								<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>
							</tbody>
						</table>
						
						<p></p>
						<p></p>

						<p>Inverse thead</p>
						<table class="table table-sm">
							<thead class="thead-inverse">
								<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>
							</tbody>
						</table>
					</section>

				</div>
			</div>
		</div>


	</div>
</section>