Bootstrap Tables

Overview

Bootstrap provides rich styling options for tables, including basic styles, striped rows, borders, hover effects, and more. These styles make tables more beautiful and readable.

Basic Tables

Use the .table class to add basic styling to any <table>:

<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Position</th>
            <th scope="col">Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Zhang San</td>
            <td>Frontend Developer</td>
            <td>Technology Department</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Li Si</td>
            <td>Backend Developer</td>
            <td>Technology Department</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Wang Wu</td>
            <td>Product Manager</td>
            <td>Product Department</td>
        </tr>
    </tbody>
</table>

Table Variants

Dark Tables

Use .table-dark to create dark tables:

<table class="table table-dark">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Position</th>
            <th scope="col">Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Zhang San</td>
            <td>Frontend Developer</td>
            <td>Technology Department</td>
        </tr>
    </tbody>
</table>

Striped Row Tables

Use .table-striped to add zebra-striping to table rows:

<table class="table table-striped">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Name</th>
            <th scope="col">Position</th>
            <th scope="col">Department</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Zhang San</td>
            <td>Frontend Developer</td>
            <td>Technology Department</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Li Si</td>
            <td>Backend Developer</td>
            <td>Technology Department</td>
        </tr>
    </tbody>
</table>

Best Practices

1. Use semantic HTML: Use proper table structure with thead, tbody, etc.
2. Ensure accessibility: Use scope attributes for headers
3. Responsive design: Consider using responsive table classes for mobile devices
4. Maintain consistency: Use consistent styling across all tables

Next Steps

Now that you've mastered Bootstrap tables, continue exploring other Bootstrap components.