Bootstrap Table
Bootstrap provides a clear layout for creating tables. The following table lists some of the table elements supported by Bootstrap:
| Tag | Description |
|---|---|
<table> |
Adds basic styling to the table. |
<thead> |
Container element for table header rows (<tr>), used to identify table columns. |
<tbody> |
Container element for table rows (<tr>) within the table body. |
<tr> |
Container element for table cells (<td> or <th>) that appear in a single row. |
<td> |
Default table cell. |
<th> |
Special table cell used to identify columns or rows (depending on scope and position). Must be used within <thead>. |
<caption> |
Description or summary of the table's content. |
Table Classes
The following styles can be applied to tables:
| Class | Description | Example |
|---|---|---|
.table |
Adds basic styling (only horizontal dividers) to any <table>. |
Try it |
.table-striped |
Adds zebra-striping to any table row within <tbody> (not supported in IE8). |
Try it |
.table-bordered |
Adds borders to all the cells of the table. | Try it |
.table-hover |
Enables a hover state on rows within <tbody>. |
Try it |
.table-condensed |
Makes tables more compact. | Try it |
| Combined use of all table classes | Try it |
<tr>, <th>, and <td> Classes
The following classes can be used for table rows or cells:
| Class | Description | Example |
|---|---|---|
.active |
Applies the hover color to a row or cell. | Try it |
.success |
Indicates a successful or positive action. | Try it |
.info |
Indicates a change or action that needs attention. | Try it |
.warning |
Indicates a warning that might need attention. | Try it |
.danger |
Indicates a dangerous or potentially negative action. | Try it |
Basic Table
If you want a table with only padding and horizontal dividers, add the class .table, as shown in the following example:
Example
<table class="table">
<caption>Basic Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
</tr>
</tbody>
</table>
The result is as follows:
Optional Table Classes
In addition to the basic table markup and the .table class, there are some classes that can be used to define styles for the markup. Below, you will learn about these classes.
Striped Table
By adding the .table-striped class, you will see stripes on rows within <tbody>, as shown in the following example:
Example
<table class="table table-striped">
<caption>Striped Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Pincode</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
<th>City</th>
<th>Postal Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
Result as shown below:
Bordered Table
By adding the .table-bordered class, you will see that borders are added around each element, and the entire table is rounded, as shown in the following example:
Example
<table class="table table-bordered">
<caption>Bordered Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Postal Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
Result as shown below:
Hover Table
By adding the .table-hover class, a light gray background appears when the pointer hovers over the rows, as shown in the following example:
Example
<table class="table table-hover">
<caption>Hover Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Postal Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
Result as shown below:
Condensed Table
By adding the .table-condensed class, the padding within the rows is halved to make the table look more compact, as shown in the following example. This is useful when you want to make the information look more compact.
Example
<table class="table table-condensed">
<caption>Condensed Table Layout</caption>
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Postal Code</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
Result as shown below:
Contextual Classes
The contextual classes listed in the table below allow you to change the background color of table rows or individual cells.
| Class | Description |
|---|---|
| .active | Applies the hover color to a specific row or cell |
| .success | Indicates a successful or positive action |
| .warning | Indicates a warning that needs attention |
| .danger | Indicates a dangerous or potentially negative action |
These classes can be applied to `<tr>`, `<td>`, or `<th>`.
## Example
<table class="table"> <caption>Contextual Table Layout</caption> <thead> <tr> <th>Product</th> <th>Payment Date</th> <th>Status</th></tr> </thead> <tbody> <tr class="active"> <td>Product 1</td> <td>23/11/2013</td> <td>Pending Shipment</td></tr> <tr class="success"> <td>Product 2</td> <td>10/11/2013</td> <td>In Transit</td></tr> <tr class="warning"> <td>Product 3</td> <td>20/10/2013</td> <td>Awaiting Confirmation</td></tr> <tr class="danger"> <td>Product 4</td> <td>20/10/2013</td> <td>Returned</td></tr> </tbody> </table>
The result is as follows:
## Responsive Table
By wrapping any `.table` in `.table-responsive` class, you can make the table scroll horizontally to fit small devices (less than 768px). When viewed on larger devices wider than 768px, you will not see any difference.
## Example
<div class="table-responsive"> <table class="table"> <caption>Responsive Table Layout</caption> <thead> <tr> <th>Product</th> <th>Payment Date</th> <th>Status</th></tr> </thead> <tbody> <tr> <td>Product 1</td> <td>23/11/2013</td> <td>Pending Shipment</td></tr> <tr> <td>Product 2</td> <td>10/11/2013</td> <td>In Transit</td></tr> <tr> <td>Product 3</td> <td>20/10/2013</td> <td>Awaiting Confirmation</td></tr> <tr> <td>Product 4</td> <td>20/10/2013</td> <td>Returned</td></tr> </tbody> </table> </div> ```
The result is as follows: