Tables

Tables allow data to be displayed with a structure. Be sure that the information being presented warrants being displayed in a table. Often, regular paragraphs of text are better way to communicate.

Default

By default, tables feature a simple one pixel border. Each table is wrapped in a div, responsive-table, which allows for wide tables to horizontally scroll at smaller screen sizes.

Make sure to include thead and tbody sections as tags are vertically aligned to the bottom only within a thead tag.

<div class="table-responsive">
	<table>
	<thead>
		<tr>
			<th>Column heading 1</th>
			<th>Column heading 2</th>
			<th>Column heading 3</th>
			<th>Column heading 4</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Column content 1</th>
			<th>Column content 2</th>
			<th>Column content 3</th>
			<th>Column content 4</th>
		</tr>
	</tbody>
	</table>
</div>

Striped

Another option is a striped table, add the class table-striped to activate it. This form of table is useful when the amount of content in each cell is minimal and the comparison between data entries is important.

<div class="table-responsive">
	<table class="table-striped">
	<thead>
		<tr>
			<th>Column heading 1</th>
			<th>Column heading 2</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>Column content 1</th>
			<th>Column content 2</th>
		</tr>
	</tbody>
	</table>
</div>