Skip to main content Accessibility Feedback

Tables

Kelp includes simple, easy-to-read styles for table elements.

First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman 
<table>
	<thead>
		<tr>
			<th scope="col">First Name</th>
			<th scope="col">Last Name</th>
			<th scope="col">Super Hero</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Peter</td>
			<td>Parker</td>
			<td>Spiderman</td>
		</tr>
		<tr>
			<td>Bruce</td>
			<td>Wayne</td>
			<td>Batman</td>
		</tr>
		<tr>
			<td>Clark</td>
			<td>Kent</td>
			<td>Superman</td>
		</tr>
	</tbody>
</table>

Zebra Striping

You can add zebra striping for easier readability with the .table-striped class.

First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman 
<table class="table-striped">
	<thead>
		<tr>
			<th scope="col">First Name</th>
			<th scope="col">Last Name</th>
			<th scope="col">Super Hero</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Peter</td>
			<td>Parker</td>
			<td>Spiderman</td>
		</tr>
		<tr>
			<td>Bruce</td>
			<td>Wayne</td>
			<td>Batman</td>
		</tr>
		<tr>
			<td>Clark</td>
			<td>Kent</td>
			<td>Superman</td>
		</tr>
	</tbody>
</table>

You can use the .primary, .secondary, .success, .danger, and .warning classes to change the color of table borders and zebra stripes.

First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman 
<table class="table-striped secondary">
	<!-- ... -->
</table>