Bootstrap Tables

Bootstrap offering a nice and clean layout for making tables. Some of the table elements supported by Bootstrap are:

Tag	Description
<table>	Wrapping element for displaying data in a tabular format
<thead>	Container element for table header rows (<tr>) to label table columns
<tbody>	Container element for table rows (<tr>) in the body of the table
<tr>	Container element for a set of table cells (<td> or <th>) that appears on a single row
<td>	Default table cell
<th>	Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
<caption>	Description or summary of what the table holds.

Basic Table

If you need a basic and clean table style with some light padding and horizontal dividers, use the base class of “.table” to any table as you can see the following example:

<table class="table">
 <thead>
 <tr>
 <th>#</th>
 <th>First Name</th>
 <th>Last Name</th>
 <th>Username</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>Mark</td>
 <td>Otto</td>
 <td>@mdo</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jacob</td>
 <td>Thornton</td>
 <td>@fat</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Larry</td>
 <td>the Bird</td>
 <td>@twitter</td>
 </tr>
 </tbody>
</table>

Demo

Optional Table Classes

There are a small number of additional classes that you can use to style the markup along with the base table markup and the .table class. Following segments will provide you a glance of all these classes.

Striped Table

By using the .table-striped class, you will get zebra-striping on rows within the <tbody> as seen in the following 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>
 <td>1</td>
 <td>Mark</td>
 <td>Otto</td>
 <td>@mdo</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jacob</td>
 <td>Thornton</td>
 <td>@fat</td>
 </tr>
 <tr>
 <td>3</td>
 <td>Larry</td>
 <td>the Bird</td>
 <td>@twitter</td>
 </tr>
 </tbody>
</table>

Demo

Bordered Table

By using the .table-bordered class, you will get borders on every element and rounded corners around the whole table as shown in the following model:

<table class="table table-bordered">
 <thead>
 <tr>
 <th>#</th>
 <th>First Name</th>
 <th>Last Name</th>
 <th>Username</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td rowspan="2">1</td>
 <td>Mark</td>
 <td>Otto</td>
 <td>@mdo</td>
 </tr>
 <tr>
 <td>Mark</td>
 <td>Otto</td>
 <td>@TwBootstrap</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jacob</td>
 <td>Thornton</td>
 <td>@fat</td>
 </tr>
 <tr>
 <td>3</td>
 <td colspan="2">Larry the Bird</td>
 <td>@twitter</td>
 </tr>
 </tbody>
</table>

Demo

Hover Table

By putting the .table-hover class, a light gray background will be displayed to rows as the cursor hovers over them, as seen in the following 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>
 <td>1</td>
 <td>Mark</td>
 <td>Otto</td>
 <td>@mdo</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jacob</td>
 <td>Thornton</td>
 <td>@fat</td>
 </tr>
 <tr>
 <td>3</td>
 <td colspan="2">Larry the Bird</td>
 <td>@twitter</td>
 </tr>
 </tbody>
</table>

Demo

Condensed Table

Add .table-condensed to make tables more compact by cutting cell padding in half.

<table class="table table-condensed">
 <thead>
 <tr>
 <th>#</th>
 <th>First Name</th>
 <th>Last Name</th>
 <th>Username</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>1</td>
 <td>Mark</td>
 <td>Otto</td>
 <td>@mdo</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Jacob</td>
 <td>Thornton</td>
 <td>@fat</td>
 </tr>
 <tr>
 <td>3</td>
 <td colspan="2">Larry the Bird</td>
 <td>@twitter</td>
 </tr>
 </tbody>
</table>

Demo

Contextual classes

The Contextual classes displayed in following table will allow you to modify the background color of your table rows or individual cells.

Class	Description
.active	Applies the hover color to a particular row or cell
.success	Indicates a successful or positive action
.warning	Indicates a warning that might need attention
.danger	Indicates a dangerous or potentially negative action

These classes can be applied to <tr>, <td> or <th>.

<table class="table">
 <thead>
 <tr>
 <th>#</th>
 <th>Column heading</th>
 <th>Column heading</th>
 <th>Column heading</th>
 </tr>
 </thead>
 <tbody>
 <tr class="active">
 <td>1</td>
 <td>Column content</td>
 <td>Column content</td>
 <td>Column content</td>
 </tr>
 <tr>
 <td>2</td>
 <td>Column content</td>
 <td>Column content</td>
 <td>Column content</td>
 </tr>
 <tr class="success">
 <td>3</td>
 <td>Column content</td>
 <td>Column content</td>
 <td>Column content</td>
 </tr>
 <tr>
 <td>4</td>
 <td>Column content</td>
 <td>Column content</td>
 <td>Column content</td>
 </tr>
 <tr class="info">
 <td>5</td>
 <td>Column content</td>
 <td>Column content</td>
 <td>Column content</td>
 </tr>
 <tr>
 <td>6</td>
 <td>Column content</td>
 <td>Column content</td>
 <td>Column content</td>
 </tr>
 <tr class="warning">
 <td>7</td>
 <td>Column content</td>
 <td>Column content</td>
 <td>Column content</td>
 </tr>
 <tr>
 <td>8</td>
 <td>Column content</td>
 <td>Column content</td>
 <td>Column content</td>
 </tr>
 <tr class="danger">
 <td>9</td>
 <td>Column content</td>
 <td>Column content</td>
 <td>Column content</td>
 </tr>
 </tbody>
</table>

Demo

Responsive tables

By wrapping every .table in .table-responsive class, you will build the table scroll horizontally up to small devices which resolution are under 768px. While screening on everything larger than 768px wide, you will not observe any difference in these tables.

<table class="table">
 <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>
 <td>1</td>
 <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>
 <td>2</td>
 <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>
 <td>3</td>
 <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>

<table class="table table-bordered">
 <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>
 <td>1</td>
 <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>
 <td>2</td>
 <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>
 <td>3</td>
 <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>

Demo

Bootstrap Tables