Tables - Basic
One stop solution for perfect admin dashboard!
Basic Example
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
</tr>
...
</tbody>
</table>
Striped Rows
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-striped">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
</tr>
...
</tbody>
</table>
Bordered Table
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-bordered">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
</tr>
...
</tbody>
</table>
Striped + Bordered Table
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-striped table-bordered">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
</tr>
...
</tbody>
</table>
Hover Rows
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<table class="table table-hover table-bordered">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
</tr>
...
</tbody>
</table>
Contextual Classes
Use contextual classes to color 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 |
.info |
Indicates a neutral informative change or action |
.warning |
Indicates a warning that might need attention |
.danger |
Indicates a dangerous or potentially negative action |
# | Column heading | Column heading | Column heading |
---|---|---|---|
1 | Column content | Column content | Column content |
2 | Column content | Column content | Column content |
3 | Column content | Column content | Column content |
4 | Column content | Column content | Column content |
5 | Column content | Column content | Column content |
6 | Column content | Column content | Column content |
7 | Column content | Column content | Column content |
8 | Column content | Column content | Column content |
9 | Column content | Column content | Column content |
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Column content</td>
</tr>
<tr class="success">
<th scope="row">3</th>
<td>Column content</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Column content</td>
</tr>
<tr class="info">
<th scope="row">5</th>
<td>Column content</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Column content</td>
</tr>
<tr class="warning">
<th scope="row">7</th>
<td>Column content</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Column content</td>
</tr>
<tr class="danger">
<th scope="row">9</th>
<td>Column content</td>
</tr>
</tbody>
</table>