Koyaka
Patreon

Table

Basic Table

Preview Code
# Name Email Status
1 John Doe john@example.com Active
2 Jane Smith jane@example.com Inactive
3 Michael Lee michael@example.com Active
4 Emily Johnson emily@example.com Pending
Total Users 4 

    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Email</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="selected">
                <td>1</td>
                <td>John Doe</td>
                <td>john@example.com</td>
                <td>Active</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Smith</td>
                <td>jane@example.com</td>
                <td>Inactive</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Michael Lee</td>
                <td>michael@example.com</td>
                <td>Active</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Emily Johnson</td>
                <td>emily@example.com</td>
                <td>Pending</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total Users</td>
                <td>4</td>
            </tr>
        </tfoot>
    </table>

Bordered + Hoverable Table

Preview Code
# Name Email Status
1 John Doe john@example.com Active
2 Jane Smith jane@example.com Inactive
3 Michael Lee michael@example.com Active
4 Emily Johnson emily@example.com Pending
Total Users 4 

    <table class="table bordered hoverable">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Email</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="selected">
                <td>1</td>
                <td>John Doe</td>
                <td>john@example.com</td>
                <td>Active</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Smith</td>
                <td>jane@example.com</td>
                <td>Inactive</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Michael Lee</td>
                <td>michael@example.com</td>
                <td>Active</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Emily Johnson</td>
                <td>emily@example.com</td>
                <td>Pending</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total Users</td>
                <td>4</td>
            </tr>
        </tfoot>
    </table>

Striped Table

Preview Code
# Name Email Status
1 John Doe john@example.com Active
2 Jane Smith jane@example.com Inactive
3 Michael Lee michael@example.com Active
4 Emily Johnson emily@example.com Pending
Total Users 4 

    <table class="table striped">
        <thead>
            <tr>
                <th>#</th>
                <th>Name</th>
                <th>Email</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr class="selected">
                <td>1</td>
                <td>John Doe</td>
                <td>john@example.com</td>
                <td>Active</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Jane Smith</td>
                <td>jane@example.com</td>
                <td>Inactive</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Michael Lee</td>
                <td>michael@example.com</td>
                <td>Active</td>
            </tr>
            <tr>
                <td>4</td>
                <td>Emily Johnson</td>
                <td>emily@example.com</td>
                <td>Pending</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total Users</td>
                <td>4</td>
            </tr>
        </tfoot>
    </table>

Table Sizes

Preview Code

xs, sm, md, lg, xl

# Product Category Price
1 Laptop Electronics $1200
2 Desk Chair Furniture $200
3 Headphones Electronics $150
Total Items 3 

    <h4>xs, sm, md, lg, xl</h4>
    <table class="table xs">
        <thead>
            <tr>
                <th>#</th>
                <th>Product</th>
                <th>Category</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Laptop</td>
                <td>Electronics</td>
                <td>$1200</td>
            </tr>
            <tr class="selected">
                <td>2</td>
                <td>Desk Chair</td>
                <td>Furniture</td>
                <td>$200</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Headphones</td>
                <td>Electronics</td>
                <td>$150</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total Items</td>
                <td>3</td>
            </tr>
        </tfoot>
    </table>

Contents