John Doe
PHP DeveloperTables - 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>