Basic Tables
Basic, Dark and Colored Tables
Basic Example
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Dark Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Colored Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="row">
<div class="col-xxl-4 col-xl-6">
<div class="card mb-xl-0">
<div class="card-header">
<h4 class="card-title">Basic Example</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-xl-0">
<div class="card-header">
<h4 class="card-title">Dark Table</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table table-dark mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end cardbody -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Colored Table</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table table-primary table-striped mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead><!-- end thead -->
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end table responsive-->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
</div><!-- end row -->
Table Head, Striped Rows and Colored Bordered
Table Head
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Striped Rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Colored Bordered Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="row">
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Table Head</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table mb-0">
<thead class="table-light">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end tbody-->
</table><!-- end table-->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Striped Rows</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end table -->
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Colored Bordered Table</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered border-primary mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead><!-- end thead -->
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
</div><!-- end row -->
Bordered Table, Dark Table with Striped Rows, and Hoverable Rows
Bordered Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Dark Table with Striped Rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Hoverable Rows
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="row">
<div class="col-xxl-4 col-xl-6">
<div class="row">
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Bordered Table</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Dark Table with Striped Rows</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table table-dark table-striped mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end cardbody -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Hoverable Rows</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end table responsive-->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
</div><!-- end row --> <div class="card mb-xl-0">
<div class="card-header">
<h4 class="card-title">Table Head</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table mb-0">
<thead class="table-light">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end tbody-->
</table><!-- end table-->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-xl-0">
<div class="card-header">
<h4 class="card-title">Striped Rows</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end table -->
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Colored Bordered Table</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered border-primary mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead><!-- end thead -->
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
</div><!-- end row -->
Borderless, Small and Active Tables
Borderless Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
Small Table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| 4 | Mark | Otto | @mdo |
| 5 | Jacob | Thornton | @fat |
Active Tables
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="row">
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Borderless Table</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table table-borderless mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Small Table</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm m-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end table responsive-->
</div><!-- end card body-->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Active Tables</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="table-active">
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td class="table-active">@twitter</td>
</tr>
</tbody>
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
</div><!-- end row -->
Contextual Classes, Table Foot and Captions
Contextual Classes
| # | Class | Heading | Heading |
|---|---|---|---|
| 1 | Table light | Cell | Cell |
| 2 | Table Success | Cell | Cell |
| 3 | Table Info | Cell | Cell |
| 4 | Table Warning | Cell | Cell |
| 5 | Table Danger | Cell | Cell |
Table Foot
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird | |
| Footer | Footer | Footer | Footer |
Captions
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
<div class="row">
<div class="col-xxl-4 col-xl-6">
<div class="card mb-xl-0">
<div class="card-header">
<h4 class="card-title">Contextual Classes</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th>#</th>
<th>Class</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr class="table-light">
<th scope="row">1</th>
<td>Table light</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-success">
<th scope="row">2</th>
<td>Table Success</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-info">
<th scope="row">3</th>
<td>Table Info</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-warning">
<th scope="row">4</th>
<td>Table Warning</td>
<td>Cell</td>
<td>Cell</td>
</tr>
<tr class="table-danger">
<th scope="row">5</th>
<td>Table Danger</td>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-xl-0">
<div class="card-header">
<h4 class="card-title">Table Foot</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
<td>Footer</td>
</tr>
</tfoot>
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
<div class="col-xxl-4 col-xl-6">
<div class="card mb-0">
<div class="card-header">
<h4 class="card-title">Captions</h4>
</div><!-- end card header -->
<div class="card-body">
<div class="table-responsive">
<table class="table mb-0">
<caption>List of users</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end table responsive -->
</div><!-- end card body -->
</div><!-- end card -->
</div><!-- end col -->
</div><!-- end row -->
Responsive Tables
| # | Table heading | Table heading | Table heading | Table heading | Table heading | Table heading |
|---|---|---|---|---|---|---|
| 1 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 2 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
| 3 | Table cell | Table cell | Table cell | Table cell | Table cell | Table cell |
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr>
<th>#</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody><!-- end tbody -->
</table><!-- end table -->
</div><!-- end responsive -->