Tables
Use the table class on tables to apply a clean, borderless layout, and separate
headings from the body with a horizontal line.
| One |
Two |
Three |
| One |
Two |
Three |
| One |
Two |
Three |
<table class="table">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
Striped tables
Use the table-striped modifier class on tables to apply a striped pattern to visually
separate rows.
| One |
Two |
Three |
| One |
Two |
Three |
| One |
Two |
Three |
<table class="table table-striped">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
Adding a color class, e.g. blue or plum, to a table-striped table, you can customize
the color of stripes.
| One |
Two |
Three |
| One |
Two |
Three |
| One |
Two |
Three |
<table class="table table-striped blue">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
| One |
Two |
Three |
| One |
Two |
Three |
| One |
Two |
Three |
<table class="table table-striped red">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
| One |
Two |
Three |
| One |
Two |
Three |
| One |
Two |
Three |
<table class="table table-striped plum">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>
Compact tables
Use the table-compact modifier class on tables to reduce the cell padding for a more compact layout.
| One |
Two |
Three |
| One |
Two |
Three |
| One |
Two |
Three |
<table class="table table-compact">
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
</table>