Tables Classes in Bootstrap 5 | Explained

Tables in web design are an intelligent way to display a huge amount of data in rows and columns, especially when you are comparing objects. Styling them using CSS can be a lengthy procedure, however, Bootstrap does this task in no time. Here we will discuss various classes in Bootstrap 5 that are associated with tables and help style them in an efficient manner.

Tables with a basic style

For the purpose of giving tables, a basic style that has a certain padding and horizontal dividers use the .table class. Here is a demonstration of a basic table.

How to create a simple table using Bootstrap 5

Suppose you want to generate a simple table then this is how it is done.

HTML

In the above code, we are placing the table inside a div container and then to generate the table we are using the <table> tag and assigning it the .table class to style it. Then we are using various tags such as <thead>, <tr>, <th>, <tbody>, and <td> to create the table.

Output

The table was given a simple style.

Table with a border

For the purpose of adding a border to your table you have to use the .table-bordered class.

How to create a table with border

Let’s create a table with a border.

HTML

The table generated here is the same as the one created above with the only difference that here apart from giving it a basic style we are also adding borders by using the .table-bordered class.

Output

Borders were added successfully to the table.

Table with no borders

Another interesting thing that you can do using Bootstrap 5 is to make completely borderless tables and for doing so you have to use the .table-borderless class.

How to create a borderless table in Bootstrap 5

Here is how you generate a table with no borders.

HTML

The code above will generate a borderless table having a basic style i.e. it will have a certain padding and horizontal dividers but it will have no borders.

Output

The class is working properly.

Table with striped rows

In order to beautify your table by generating stripped rows use the .table-striped class.

How to create a table with striped rows

To understand the working of this class consult the example below.

HTML

The code above will generate a table having a basic style and striped rows.

Output

A table with striped rows was generated with success.

Hoverable Table

If you desire to give your rows hover state then use .table-hover class. When the user brings the mouse over on the rows, a hover effect with a gray background color will be generated.

How to create a hoverable table

Let’s create a hoverable table.

HTML

Using the code snippet above you can easily generate a simply styled table with rows having a hover effect.

Output

We have generated a hoverable table.

Table with colored rows

You can also add various colors to multiple rows in a table using the color classes provided by Bootstrap 5.

How to create a colored rows table in Bootstrap 5

Suppose you want to give each row a different color then follow the example below.

HTML

In the code above, we are first of all giving a dark background to the table head and then each of the other rows have been assigned a different color.

Output

A table with colored rows was generated successfully.

All of the table classes associated with colors in Bootstrap 5 are given below.

Responsive Tables

For the purpose of creating responsive tables that correspond to the screen width and alter their size accordingly, use the .table-responsive class.

How to create a responsive table using bootstrap 5

Suppose you want to build a responsive table for your web page.

HTML

In the above code, to demonstrate the concept of responsiveness we have added more rows. Along with this we have also generated an additional div container and assigned it the .table-responsive class. Moreover, the table has a basic style.

Output

The class is working properly.

Various classes that add responsiveness to the tables depending upon the screen width are provided below.

1. .table-responsive-sm

For screen width less than 576px.

2. .table-responsive-md

For screen width lower than 768px.

3. .table-responsive-lg

For screen width less than 992px.

4. .table-responsive-xl

For screen width less than 1200px.

5. .table-responsive-xxl

For screen width less than 1400px.

Conclusion

Table classes in Bootstrap 5 allow you to style tables in a very easy and quick manner. Using these classes you can give tables some padding, horizontal dividers, colors, border, hover state, etc. Moreover, you can also make your tables responsive using the classes associated with tables in Bootstrap 5. All the table classes along with relevant examples have been discussed in this report.