Tables
Default Table
Using the most basic table markup, here’s how .table-based tables look in Bootstrap.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Striped Table
Use .table-striped to add zebra-striping to any table row within the <tbody>.
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</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 colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Data Table
A data table example with custom content
<div class="table-overflow">
<table class="table table-xl">
<thead class="thead-light">
<tr>
<th scope="col">Users</th>
<th scope="col">Products</th>
<th scope="col">Registered</th>
<th scope="col">Earnings</th>
<th scope="col">Status</th>
<th class="text-center" scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="list-media">
<div class="list-item">
<div class="media-img">
<img class="circle raised-xs" src="../assets/images/ph-mini.jpg" alt="">
</div><!-- / media-img -->
<div class="info">
<span class="title">Mark</span>
<span class="sub-title">@mdo</span>
</div><!-- / info -->
</div><!-- / list-item -->
</div><!-- / list-media -->
</td>
<td>34</td>
<td>Mar 09, 2022</td>
<td>$5.350</td>
<td><span class="badge badge-pill badge-primary">Pending</span></td>
<td class="text-center"><a href="#x" class="text-link mr-10"><i class="bi-pencil"></i></a> <a href="#x" class="text-link success-hover mr-10"><i class="bi-check-circle"></i></a> <a href="#x" class="text-link danger-hover mr-10"><i class="bi-trash"></i></a></td>
</tr>
<tr>
<td>
<div class="list-media">
<div class="list-item">
<div class="media-img">
<img class="circle raised-xs" src="../assets/images/ph-mini.jpg" alt="">
</div><!-- / media-img -->
<div class="info">
<span class="title">Jacob</span>
<span class="sub-title">@fat</span>
</div><!-- / info -->
</div><!-- / list-item -->
</div><!-- / list-media -->
</td>
<td>19</td>
<td>Mar 07, 2022</td>
<td>$6,964</td>
<td><span class="badge badge-pill badge-success">Paid</span></td>
<td class="text-center"><a href="#x" class="text-link mr-10"><i class="bi-pencil"></i></a> <a href="#x" class="text-link success-hover mr-10"><i class="bi-check-circle"></i></a> <a href="#x" class="text-link danger-hover mr-10"><i class="bi-trash"></i></a></td>
</tr>
<tr class="last-table-row">
<td>
<div class="list-media">
<div class="list-item">
<div class="media-img">
<img class="circle" src="../assets/images/ph-mini.jpg" alt="">
</div>
<div class="info">
<span class="title">Larry</span>
<span class="sub-title">@twitter</span>
</div>
</div>
</div>
</td>
<td>73</td>
<td>Mar 05, 2022</td>
<td>$2.127</td>
<td><span class="badge badge-pill badge-danger">Canceled</span></td>
<td class="text-center"><a href="#x" class="text-link mr-10"><i class="bi-pencil"></i></a> <a href="#x" class="text-link success-hover mr-10"><i class="bi-check-circle"></i></a> <a href="#x" class="text-link danger-hover mr-10"><i class="bi-trash"></i></a></td>
</tr>
</tbody>
</table>
</div><!-- / table-overflow -->
Shopping-cart Table
A Shopping-cart table example.
<div class="table-overflow">
<table class="table table-xl">
<thead class="thead-light">
<tr>
<th scope="col">Product</th>
<th scope="col">Price</th>
<th scope="col">Quantity</th>
<th scope="col">Total</th>
<th class="text-center" scope="col"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="list-media">
<div class="list-item ">
<div class="media-img">
<img src="../assets/images/ph-mini.jpg" alt="" class="rounded">
</div><!-- / media-img -->
<div class="info pt-10">
<span class="title">T-Shirt</span>
<span class="sub-title">Shirts</span>
</div><!-- / info -->
</div><!-- / list-item -->
</div><!-- / list-media -->
</td>
<td>$29.99</td>
<td class="qty"><input type="number" step="1" min="0" name="cart" value="1" title="Qty" class="form-control qty"></td>
<td>$29.99</td>
<td class="text-center"><a href="#x"><i class="bi-x-circle table-remove"></i></a></td>
</tr>
<tr>
<td>
<div class="list-media">
<div class="list-item">
<div class="media-img">
<img src="../assets/images/ph-mini.jpg" alt="" class="rounded">
</div>
<div class="info pt-10">
<span class="title">Snapback Cap</span>
<span class="sub-title">Accessories</span>
</div>
</div>
</div>
</td>
<td>$19.99</td>
<td class="qty"><input type="number" step="1" min="0" name="cart" value="2" title="Qty" class="form-control qty"></td>
<td>$39.98</td>
<td class="text-center"><a href="#x"><i class="bi-x-circle table-remove"></i></a></td>
</tr>
<tr class="last-table-row">
<td>
<p class="mb-5"><b>Sub Total:</b> $59.97</p>
<p class="mb-5"><b>Shipping:</b> $10</p>
<p class="mb-5"><b>VAT:</b> 7%</p>
<p class="mb-0"><b>Total <span class="fs-12 opc-75">(Incl. VAT)</span>:</b> $74.87</p>
</td>
<td>
<a href="#x" class="btn btn-dark d-block mb-10">
<i class="bi-arrow-repeat mr-5"></i>
<span>Update</span>
</a>
<a href="#x" class="btn btn-primary d-block">
<i class="bi-cart3 mr-5"></i>
<span>Checkout</span>
</a>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div><!-- / table-overflow -->