Bootstrap 5 Tables

Welcome to The Coding College, where we simplify coding for developers of all skill levels. In this tutorial, we’ll explore Bootstrap 5 Tables, a powerful tool for displaying data in a structured and responsive way. Bootstrap provides various classes and features to make table styling and responsiveness effortless.

Whether you’re building a simple table or a feature-rich data display, Bootstrap 5 offers the flexibility and ease you need. Let’s dive in!

Why Use Bootstrap 5 Tables?

Bootstrap 5 tables provide a robust and consistent way to display data. Here are the benefits:

  1. Quick Customization: Predefined classes help you style tables with minimal effort.
  2. Responsive Design: Tables are mobile-friendly and adapt to different screen sizes.
  3. Enhanced Readability: Features like striped rows, borders, and hover effects improve user experience.
  4. Accessibility: Tables are optimized for screen readers and accessibility guidelines.

Basic Table Structure in Bootstrap 5

The base class for creating tables in Bootstrap is .table. Here’s an example of a simple table:

Example: Basic Table

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>32</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

Output:
This creates a clean and readable table with default styling.

Adding Table Styles

Bootstrap 5 includes additional table styles that enhance the visual presentation. Here are some commonly used styles:

1. Striped Rows

Use .table-striped to add alternating row colors for better readability.

<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>32</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

2. Hoverable Rows

Add the .table-hover class to highlight rows when hovered over.

<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>32</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

3. Bordered Tables

The .table-bordered class adds borders to all table cells for a more structured look.

<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>32</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

4. Small Tables

Use .table-sm to create a more compact version of the table, reducing padding in cells.

<table class="table table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>32</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

Responsive Tables

For tables to adapt to smaller screen sizes, use the .table-responsive class. Wrap the table inside a div with this class.

Example: Responsive Table

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>John Doe</td>
        <td>28</td>
        <td>New York</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Jane Smith</td>
        <td>32</td>
        <td>London</td>
      </tr>
    </tbody>
  </table>
</div>

Key Takeaway:

This ensures horizontal scrolling for tables on smaller devices.

Combining Table Styles

You can combine multiple table classes for enhanced styling. For example:

<table class="table table-striped table-hover table-bordered table-sm">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John Doe</td>
      <td>28</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jane Smith</td>
      <td>32</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

Best Practices for Using Bootstrap Tables

  1. Use Table Styles Wisely: Apply styles like striped or bordered sparingly to avoid clutter.
  2. Ensure Accessibility: Add proper thead and scope attributes for better readability by screen readers.
  3. Test Responsiveness: Always wrap tables with .table-responsive for mobile-friendly layouts.
  4. Minimize Complexity: Use .table-sm for tables with large datasets to save space.

FAQs About Bootstrap 5 Tables

Q1: Can I add custom styling to Bootstrap tables?

A: Yes! You can use custom CSS or Sass variables to override Bootstrap’s default styles.

Q2: How do I highlight specific rows or columns?

A: Use contextual classes like .table-primary, .table-success, or .table-danger to highlight rows.

Q3: Are tables responsive by default?

A: No, you need to wrap tables with the .table-responsive class for responsiveness.

Conclusion

Bootstrap 5 Tables make it easy to display data in a structured and visually appealing way. From basic tables to fully responsive layouts, Bootstrap provides the tools you need to design clean, professional tables in no time.

Leave a Comment