Default styles
For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.
| # | First Name | Last Name | Username |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | @twitter |
<table class="table"> …</table>
Optional classes
Add any of the following classes to the .table base class.
.table-striped
Adds zebra-striping to any table row within the <tbody> via the :nth-child CSS selector (not available in IE7-8).
| # | First Name | Last Name | Username |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | @twitter |
<table class="table table-striped"> …</table>
.table-bordered
Add borders and rounded corners to the table.
| # | First Name | Last Name | Username |
| 1 | Mark | Otto | @mdo |
| Mark | Otto | @TwBootstrap |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | @twitter |
<table class="table table-bordered"> …</table>
.table-hover
Enable a hover state on table rows within a <tbody>.
| # | First Name | Last Name | Username |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | @twitter |
<table class="table table-hover"> …</table>
.table-condensed
Makes tables more compact by cutting cell padding in half.
| # | First Name | Last Name | Username |
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | @twitter |
<table class="table table-condensed"> …</table>
Optional row classes
Use contextual classes to color table rows.
| Class | Description |
.success | Indicates a successful or positive action. |
.error | Indicates a dangerous or potentially negative action. |
.warning | Indicates a warning that might need attention. |
.info | Used as an alternative to the default styles. |
| # | Product | Payment Taken | Status |
| 1 | TB - Monthly | 01/04/2012 | Approved |
| 2 | TB - Monthly | 02/04/2012 | Declined |
| 3 | TB - Monthly | 03/04/2012 | Pending |
| 4 | TB - Monthly | 04/04/2012 | Call in to confirm |
... <tr class="success"> <td>1</td> <td>TB - Monthly</td> <td>01/04/2012</td> <td>Approved</td> </tr>...
Supported table markup
List of supported table HTML elements and how they should be used.
| 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 |
<caption> | Description or summary of what the table holds, especially useful for screen readers |
<table> <caption>...</caption> <thead> <tr> <th>...</th> <th>...</th> </tr> </thead> <tbody> <tr> <td>...</td> <td>...</td> </tr> </tbody></table>