seatable-ui/site/views/tables.html

Basic style of dtable related products

<div class="example">
	<h3>Table</h3>
	<p>Use <code>.table</code> to create a table.</p>
	<div class="example">
		<table class="table">
			<thead>
				<tr>
					<th>Header 1</th>
					<th>Header 2</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Item 1</td>
					<td>Item 2</td>
				</tr>
				<tr>
					<td>Item 3</td>
					<td>Item 4</td>
				</tr>
			</tbody>
		</table>
	</div>

	<h3>Table md</h3>
	<p>Use <code>.table-md</code> to create a medium table.</p>
	<div class="example">
		<table class="table table-md">
			<thead>
				<tr>
					<th>Header 1</th>
					<th>Header 2</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Item 1</td>
					<td>Item 2</td>
				</tr>
				<tr>
					<td>Item 3</td>
					<td>Item 4</td>
				</tr>
			</tbody>
		</table>
	</div>

	<h3>Table vcenter</h3>
	<p>Use <code>.table-vcenter</code> to create a table with vertical center content.</p>
	<div class="example">
		<table class="table table-vcenter">
			<thead>
				<tr>
					<th>Header 1</th>
					<th>Header 2</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Item 1</td>
					<td>Item 2</td>
				</tr>
				<tr>
					<td>Item 3</td>
					<td>Item 4</td>
				</tr>
			</tbody>
		</table>
	</div>

	<h3>Table center</h3>
	<p>Use <code>.table-center</code> to create a table with center aligned content.</p>
	<div class="example">
		<table class="table table-center">
			<thead>
				<tr>
					<th>Header 1</th>
					<th>Header 2</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Item 1</td>
					<td>Item 2</td>
				</tr>
				<tr>
					<td>Item 3</td>
					<td>Item 4</td>
				</tr>
			</tbody>
		</table>
	</div>

	<h3>Table striped</h3>
	<p>Use <code>.table-striped</code> to create a table with alternating row color.</p>
	<div class="example">
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Header 1</th>
					<th>Header 2</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Item 1</td>
					<td>Item 2</td>
				</tr>
				<tr>
					<td>Item 3</td>
					<td>Item 4</td>
				</tr>
			</tbody>
		</table>
	</div>

	<h3>Table calendar</h3>
	<p>Use <code>.table-calendar</code> to create a calendar styled table.</p>
	<div class="example">
		<table class="table table-calendar">
			<thead>
				<tr>
					<th>Sun</th>
					<th>Mon</th>
					<th>Tue</th>
					<th>Wed</th>
					<th>Thu</th>
					<th>Fri</th>
					<th>Sat</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>1</td>
					<td>2</td>
					<td>3</td>
					<td>4</td>
					<td>5</td>
					<td>6</td>
					<td>7</td>
				</tr>
				<!-- More rows as needed -->
			</tbody>
		</table>
	</div>

	<h3>Table calendar link</h3>
	<p>Use <code>.table-calendar-link</code> to create a calendar link.</p>
	<div class="example">
		<a href="#" class="table-calendar-link">Date Link</a>
	</div>

	<h3>Table header</h3>
	<p>Use <code>.table-header</code> to create a table header with a sort icon.</p>
	<div class="example">
		<table class="table">
			<thead>
				<tr>
					<th class="table-header">Header 1</th>
					<th>Header 2</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Item 1</td>
					<td>Item 2</td>
				</tr>
				<tr>
					<td>Item 3</td>
					<td>Item 4</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>