Basic Tables in Bootstrap

Bootstrap provides a set of table classes to help you create and style tables easily. Tables are a common way to display tabular data, and Bootstrap's table classes make it simple to create responsive and visually appealing tables.

Basic Table

The basic table structure in Bootstrap uses the .table class. This class adds basic styling to tables, including borders and padding.

Example of a Basic Table:

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John</td>
      <td>Doe</td>
      <td>@johndoe</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jane</td>
      <td>Smith</td>
      <td>@janesmith</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Michael</td>
      <td>Johnson</td>
      <td>@michaeljohnson</td>
    </tr>
  </tbody>
</table>

• .table: Adds basic table styling including borders, padding, and alignment.

Table Variants

Bootstrap offers several table variants to modify the appearance of tables:

1. Striped Rows

• Class: .table-striped
• Usage: Adds zebra-stripes to rows for better readability.

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

2. Bordered Table

• Class: .table-bordered
• Usage: Adds borders to all table cells.

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

3. Hover Rows

• Class: .table-hover
• Usage: Adds a hover effect to table rows.

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

4. Small Table

• Class: .table-sm
• Usage: Reduces the padding and font size for a more compact table.

<table class="table table-sm">
  <!-- Table content -->
</table>

5. Inverse Table

• Class: .table-dark
• Usage: Applies a dark background to the table.

<table class="table table-dark">
  <!-- Table content -->
</table>

Responsive Tables

Bootstrap provides classes to make tables responsive, allowing them to scroll horizontally on smaller screens.

1. Responsive Table Wrapper

• Class: .table-responsive
• Usage: Wraps the table in a container that allows horizontal scrolling.

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

• .table-responsive: Provides horizontal scrolling for tables on smaller screens.

Table Content and Structure

1. Table Head

   • Class: .thead-light, .thead-dark
   • Usage: Adds light or dark background color to the table header.

   <thead class="thead-dark">
     <tr>
       <th>#</th>
       <th>First Name</th>
       <th>Last Name</th>
       <th>Username</th>
     </tr>
   </thead>
   

2. Table Body

   • Class: .table-body
   • Usage: Contains the main content of the table.

   <tbody>
     <tr>
       <th scope="row">1</th>
       <td>John</td>
       <td>Doe</td>
       <td>@johndoe</td>
     </tr>
     <!-- More rows -->
   </tbody>
   

3. Table Foot

   • Class: .tfoot-light, .tfoot-dark
   • Usage: Adds light or dark background color to the table footer.

   <tfoot class="tfoot-dark">
     <tr>
       <th>Total</th>
       <td>---</td>
       <td>---</td>
       <td>---</td>
     </tr>
   </tfoot>
   

Summary of Basic Tables in Bootstrap

• Basic Table: Use .table to add basic styling.
• Table Variants:
  • Striped Rows: .table-striped
  • Bordered Table: .table-bordered
  • Hover Rows: .table-hover
  • Small Table: .table-sm
  • Inverse Table: .table-dark
• Responsive Tables: Use .table-responsive to add horizontal scrolling on small screens.
• Table Content and Structure:
  • Table Head: .thead-light, .thead-dark
  • Table Body: Standard <tbody> element.
  • Table Foot: .tfoot-light, .tfoot-dark