Bootstrap 5 provides a variety of classes to style and enhance HTML tables. These classes allow you to create responsive and visually appealing tables with ease. Here's an overview of how to use tables in Bootstrap 5:

1. **Basic Table Structure**: Start by creating a basic HTML table structure. Use the `<table>` element to define the table, `<thead>` for the table header, `<tbody>` for the table body, and `<tr>` for table rows. Within the rows, use `<th>` for table header cells and `<td>` for regular table cells.

html
<table class="table">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Age</th>
            <th scope="col">Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>25</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>30</td>
            <td>Canada</td>
        </tr>
    </tbody>
</table>

2. **Table Styles**: Bootstrap offers various table styles that you can apply by adding classes to the `<table>` element. The `.table` class is the base class for tables. Additionally, you can use classes like `.table-striped` for striped rows, `.table-bordered` for bordered cells, `.table-hover` for highlighting rows on hover, and more.

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

3. **Responsive Tables**: Bootstrap provides a class to make tables responsive on small devices. Use the `.table-responsive` class to enable horizontal scrolling on smaller screens when the table content overflows the viewport.

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

4. **Table Sizing**: Bootstrap allows you to control the size of tables using classes such as `.table-sm` for small tables and `.table-lg` for large tables.

html
<table class="table table-sm">
    <!-- Small table content -->
</table>

<table class="table table-lg">
    <!-- Large table content -->
</table>

5. **Table Head Styles**: Bootstrap provides additional classes for styling the table header cells (`<th>`). Use classes like `.thead-dark` or `.thead-light` to apply dark or light background colors to the table header.

html
<table class="table">
    <thead class="thead-dark">
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Age</th>
            <th scope="col">Country</th>
        </tr>
    </thead>
    <tbody>
        <!-- Table content -->
    </tbody>
</table>

These are some of the basic ways to style and enhance tables using Bootstrap 5 classes. You can further customize the appearance and behavior of tables by combining these classes and using additional options provided by Bootstrap. Refer to the official Bootstrap documentation for more details and advanced table features.

About the Author

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc