Bootstrap Table: Create Various types of tables

Sujoy Karmakar

4 years ago

Today, we are going to learn how to create Bootstrap Table. Many times we need to add a table to our website. Here, we learn to create different types of tables. So, Bootstrap provides us some classes.

These classes make the tables something different from each other. We can also make these Bootstrap tables responsive. Not only that but We can also add a hover effect to these tables. But Bootstrap has some specific classes that we can use.

Basic Bootstrap Table

Firstly, we’ll create a basic table. Here we need the basic HTML codes for the table. But we know that the table made with only HTML codes hasn’t appeared how we want. So we also write the CSS codes for giving extra styling.

But Bootstrap makes it easy. Here we also need the Basic HTML codes. But we don’t need the CSS. We only add the class .table to the table tag. So that our table gets a pre-defined CSS. using this class, Our table gets padding and border after each column.

In this case, you must add the Bootstrap library to your <header> tag. This library or CSS link serves all these CSS according to the classes which you used.

Here’s code:

<table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Heading 1</th>
          <th scope="col">Heading 2</th>
          <th scope="col">Heading 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
        </tr>
      </tbody>
    </table>

We write the basic HTML codes for making a table. But We also add a .table class to the <table> tag. That’s why this table doesn’t need any CSS.

Striped table

A striped table is one of the most common and highly used tables. You can see these tables on many web pages. Basically, the striped table has an alternative background color of even or odd rows. This class can add only grey background color to the even or odd rows. But we can create many striped tables with different colors.

Now we want to convert the basic table into a striped table. So we just add .table-striped class to the <table> tag.

Here’s code:

<table class="table table-striped ">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Heading 1</th>
          <th scope="col">Heading 2</th>
          <th scope="col">Heading 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Col 1</td>
          <td>Col 2</td>
          <td>Col 3</td>
        </tr>
      </tbody>
    </table>

When you can use this class you notice that there is only grey and white color available. But we may need the various colors of tables which make the website more attractive.

So we just add background color classes. For this step, the table gets a different look.

Striped table with various color:

We have these color options: Primary, Secondary, Success, Danger, Warning, Info, Light, and Dark. So we also make our striped table with different colors.

Use Primary color class:

We need .table-primary class for creating this table. As we create the striped table, here we write the same codes. But we also add .table-primary class. So the table gets the blue background color. Since we used .table-striped class so it gets a new and eye-catching look.

Here’s the code:

<table class="table table-striped table-primary">
...
</table>

Use secondary color class:

We use .table-secondary class. So that our table gets grey striped background. You may think that this table is similar to a normal striped table. But there are a few different tones you can notice in the below picture.

Here’s the code:

<table class="table table-striped table-secondary">
...
</table>

Use success color class:

Here we use .table-success class. So that this table gets the green background color.

Here’s the code:

<table class="table table-striped table-success">
...
</table>

Use danger color class:

We can fill up our striped table with red color with the help of .table-danger class.

Here’s the code:

<table class="table table-striped table-danger">
...
</table>

Similarly, you can use .table-warning to make your table orange color. Now we don’t provide any pictures or codes. You use .table-info , .table-light , and .table-dark classes. And see how does your table look like.

Bootstrap table with border

There is no border around the table what we have learned so far. There are only some dividers after the columns and headings. No border has appeared around the table.

But Bootstrap has a class for this issue. If you add a class .table-bordered then a border will appear around the table.

Here’s the code:

<table class="table table-bordered">
...
</table>

Border-less Bootstrap table

Bootstrap also has a class .table-borderless . By using thing class you can omit the border of columns and the outer border. It also gives a new look to the table. You can use different background colors. With this class, you can create a striped borderless table.

Here’s the codes

<table class="table table-striped table-success table-borderless">
...
</table>

Here we create a borderless striped table. This striped table has a green background color. It hasn’t any border. We want to show that you can use these classes for making different types of tables.

Hoverable rows Bootstrap table

Most of the time we see a hover effect on tables. As we bring hover effects with CSS codes. Similarly, we can bring a hover effect with a class .table-hover.

Here’s the code:

<table class="table table-hover">
...
</table>

But we have a limitation. We can create just one type of hover effect. But don’t worry you can add CSS codes for making different types of hover effects.

Responsive table

This class allows tables to be scrolled horizontally with ease. You just add the class .table-responsive . This may help mobile or tab users. They can see the table properly by a scroll bar, appears below the table.

Here’s the code:

<table class="table table-responsive ">
 <caption>My caption</caption>
...
</table>

Add Caption

The tag <caption> defines a table caption. But we should use it after the <table> tag. Therefore a caption is visible.

Here’s the code:

<table class="table">
 <caption>My caption</caption>
...
</table>

If you missed our previous blog then visit Bootstrap buttons .