Bootstrap Tables

Bootstrap provides a flexible and powerful system for creating tables in web applications. With Bootstrap's table classes, you can easily design and customize tables to display data in a structured format. Here's how to use Bootstrap tables:

1. Basic Table Structure

Bootstrap tables follow a simple structure with the following elements:

Table: Wrap your table content within a <table> element.
Table Head: Use the <thead> element to define the table header.
Table Body: Use the <tbody> element to contain the table rows.
Table Row: Define each row of the table using the <tr> element.
Table Data: Use the <td> element to represent data cells within a table row.

Example:

<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>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

2. Striped and Hover Effect

Bootstrap provides classes to add striped rows and hover effects to tables for better readability:

Striped Rows: Use the .table-striped class to add alternating background colors to table rows.
Hover Effect: Use the .table-hover class to highlight table rows on hover.

Example:

<table class="table table-striped table-hover">
  <!-- Table content goes here -->
</table>

3. Bordered Table

To add borders around table and cells, you can use the .table-bordered class:

Example:

<table class="table table-bordered">
  <!-- Table content goes here -->
</table>

4. Responsive Tables

Bootstrap allows you to create responsive tables that adapt to different screen sizes by adding the .table-responsive class:

Example:

<div class="table-responsive">
  <table class="table">
    <!-- Table content goes here -->
  </table>
</div>

5. Contextual Classes

Bootstrap provides contextual classes to apply various styles to table rows or cells based on the content:

Active: .table-active
Success: .table-success
Warning: .table-warning
Danger: .table-danger

Example:

<tr class="table-active">
  <!-- Table row content -->
</tr>

6. Table Head Options

You can use additional options within table head cells, such as sorting icons:

Sort Ascending: <span class="glyphicon glyphicon-triangle-top"></span>
Sort Descending: <span class="glyphicon glyphicon-triangle-bottom"></span>

Example: Complete Table Template

Here's a complete example of a Bootstrap table template:

<table class="table table-striped table-bordered">
  <thead class="thead-dark">
    <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>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Conclusion

Bootstrap's table components provide a convenient and flexible way to create visually appealing and responsive tables for displaying data. By utilizing Bootstrap's table classes and options, developers can easily design tables that meet their specific requirements and enhance the user experience.

Archive