Bootstrap 5 Tables 🎯

Welcome to our deep-dive tutorial on Bootstrap 5 Tables! In this lesson, you'll learn how to create, style, and manage tables with the popular front-end framework, Bootstrap 5. By the end, you'll be able to construct tables that are both visually appealing and functional. Let's get started! 🚀

Table Basics 📝

A table in HTML is used to organize data in a grid-like structure. In Bootstrap, tables are given additional styling for a clean and responsive look across different devices.

html

<table>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Cell 1</td>
      <td>Row 1, Cell 2</td>
    </tr>
    <!-- More rows here -->
  </tbody>
</table>

💡 Pro Tip: The <thead> element contains the table's header, while <tbody> is for the table body. <tr> represents a row, and <th> and <td> are used for table headers and data cells respectively.

Bootstrap Classes 📝

To style our tables using Bootstrap, we'll use its utility classes. Here are some commonly used classes:

.table: Applies basic styling to the table, such as borders and hover effects.
.table-striped: Adds alternating background colors to rows for better readability.
.table-bordered: Gives all cells a border.
.table-hover: Enables hover effects for better interaction.

html

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

Table Responsiveness 📝

Bootstrap tables are designed to be responsive, meaning they adapt to different screen sizes. You can control the responsiveness by using the .table-{breakpoint} classes. Here's an example:

html

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

In the example above, table-sm makes the table compact on small screens, while larger screens will display the full table. The available breakpoints are xs, sm, md, lg, and xl.

Table Alignment 💡 Pro Tip:

You can center align table content using the .text-center class:

html

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

Quiz 💡 Pro Tip:

How can you make a table compact on small screens using Bootstrap?

Responsive Tables Example 💡 Pro Tip:

Let's create a responsive table that displays data for different devices:

html

<table class="table table-striped table-bordered">
  <thead>
    <tr>
      <th>Device</th>
      <th>Screen Size</th>
      <th>Tablet Width</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Extra small</td>
      <td>less than 576px</td>
      <td>600px</td>
    </tr>
    <!-- More rows here -->
  </tbody>
</table>

In the example above, the table will display the data for extra small devices (less than 576px) and will change to display tablet-specific data on tablet screens (600px and above).

Table Sorting and Pagination 💡 Pro Tip:

Bootstrap provides table sorting and pagination using the DataTables library. You can include the DataTables library in your project and enable sorting and pagination using Bootstrap classes.

html

<table class="table table-striped table-bordered table-hover" id="example">
  <!-- Table content here -->
</table>

<script>
  $(document).ready(function() {
    $('#example').DataTable();
  });
</script>

💡 Pro Tip: To use sorting and pagination, you'll need to include the DataTables library and the DataTables Bootstrap integration library.

That's all for our Bootstrap 5 Tables tutorial! By now, you should have a good understanding of how to create, style, and manage responsive tables using Bootstrap 5. Happy coding! 🎉