Kenhuang Academy
  • English

      • 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.