Table

Examples and patterns for tables using Bootstrap 5.3's table classes and styling.

Basic table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry Bird @twitter 
							<div class="table-responsive">
    <table class="table mb-0">
        <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>Larry</td>
                <td>Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

Striped rows

# Product Price Stocks
1 Widget A $10 120
2 Widget B $24 40
3 Widget C $7 320 
							<table class="table table-striped mb-0">
    <thead>
        <tr>
            <th>#</th>
            <th>Product</th>
            <th>Price</th>
            <th>Stocks</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Widget A</td><td>$10</td><td>120</td></tr>
        <tr><td>2</td><td>Widget B</td><td>$24</td><td>40</td></tr>
        <tr><td>3</td><td>Widget C</td><td>$7</td><td>320</td></tr>
    </tbody>
</table>

Hoverable rows

# Name Email Status
1 Anna Smith anna@example.com Active
2 Tom Baker tom@example.com Invited
3 Sara Lee sara@example.com Pending 
							<table class="table table-hover mb-0">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
            <th>Email</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Anna Smith</td><td>anna@example.com</td><td><span class="badge bg-success">Active</span></td></tr>
        <tr><td>2</td><td>Tom Baker</td><td>tom@example.com</td><td><span class="badge bg-secondary">Invited</span></td></tr>
        <tr><td>3</td><td>Sara Lee</td><td>sara@example.com</td><td><span class="badge bg-warning">Pending</span></td></tr>
    </tbody>
</table>

Bordered & small

# Country Capital Population
1 USA Washington 331M
2 UK London 67M 
							<table class="table table-bordered table-sm mb-0">
    <thead>
        <tr>
            <th>#</th>
            <th>Country</th>
            <th>Capital</th>
            <th>Population</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>USA</td><td>Washington</td><td>331M</td></tr>
        <tr><td>2</td><td>UK</td><td>London</td><td>67M</td></tr>
    </tbody>
</table>

Dark table

# Plan Price Users
1 Starter $0 1
2 Pro $12 5
3 Enterprise $99 Unlimited 
							<table class="table table-dark mb-0">
    <thead>
        <tr>
            <th>#</th>
            <th>Plan</th>
            <th>Price</th>
            <th>Users</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>1</td><td>Starter</td><td>$0</td><td>1</td></tr>
        <tr><td>2</td><td>Pro</td><td>$12</td><td>5</td></tr>
        <tr><td>3</td><td>Enterprise</td><td>$99</td><td>Unlimited</td></tr>
    </tbody>
</table>