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 @twitter
<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 @twitter
<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

Users Products Registered Earnings Status
Mark @mdo
34 Mar 09, 2022 $5.350 Pending
Jacob @fat
19 Mar 07, 2022 $6,964 Paid
Larry @twitter
73 Mar 05, 2022 $2.127 Canceled
<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.

Product Price Quantity Total
T-Shirt Shirts
$29.99 $29.99
Snapback Cap Accessories
$19.99 $39.98

Sub Total: $59.97

Shipping: $10

VAT: 7%

Total (Incl. VAT): $74.87

Update Checkout
<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 -->
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav