Table of contents
1.
Introduction
2.
What are Bootstrap Tables
3.
Attributes in Bootstrap Tables
4.
Types of Bootstrap Tables
4.1.
Simple Table
4.2.
Dark Table
4.3.
Striped Table
4.4.
Bordered Table
4.5.
Borderless Table
4.6.
Hoverable Table
4.7.
Coloured Table
4.8.
Responsive Table
5.
Frequently Asked Questions
5.1.
How to set Bootstrap table column width?
5.2.
Define scope in Bootstrap tables.
5.3.
Is Bootstrap a framework or a library?
5.4.
Is Bootstrap best for responsiveness?
5.5.
What is included in the Bootstrap bundle?
6.
Conclusion
Last Updated: Mar 27, 2024
Medium

Bootstrap Tables

Author Sagar Mishra
1 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Hey Ninjas! While designing any web page, we often need to add a list of data to it. Have you ever thought about how we can do this? Or how can we add tables to the web pages? The answer is we can use Bootstrap tables to do all these.

Bootstrap Tables

This blog will discuss the topic of Bootstrap tables in detail, along with all the types of Bootstrap tables.

What are Bootstrap Tables

Tables offer a visual setup of data, amplifying its visibility and clarity. Tables are also a core pillar of HTML (HyperText Markup Language), used to create websites and web pages.

Bootstrap offers a .table class, using which we can add rows and columns into the table. There are many other attributes present that help the table to be quick and easy to modify by using Bootstrap. 

Let's discuss the attributes that support the tables to look good on the web page.

Attributes in Bootstrap Tables

The Bootstrap table attributes are:

  • <table>: A <table> tag represents a table in Bootstrap. There is only one <table> tag present in a table.
     
  • <thead>: The <thead> tag is used to represent a header to the group of the body content.
     
  • <tbody>: The <tbody> tag is used to represent the table's body, which includes td, tr, etc., tags.
     
  • <th>: The <th> tag represents the head of the cell in the table.
     
  • <tr>: The <tr> tag represents the row of the table.
     
  • <td>: The <td> tag means the data present in a row of the table.
     
  • <caption>: The <caption> tag is used to summarize the table in fewer words.
     

There are many ways to modify a table, like a header design, stripping rows, adding or removing borders, rows hoverable, etc. Tables can easily be made responsive using Bootstrap's classes. Let's look at each of them one by one.

Types of Bootstrap Tables

Let's discuss different types of Bootstrap tables in this section. We will start with a simple table.

Simple Table

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Bootstrap Tables</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas!</h2>
        <div class="m-4">
            <table class="table">
                <thead>
                    <tr>
                        <th>Sr. No</th>
                        <th>Name</th>
                        <th>Designation</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Anudeep</td>
                        <td>Engineer</td>
                        <td>anudeep@gmail.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Debarshi</td>
                        <td>Manager</td>
                        <td>debarshi@gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Pramod</td>
                        <td>Associate</td>
                        <td>pramod@gmail.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

 

Output:

Simple Table output

Dark Table

We can make a dark background using .table-dark class within the <table> tag in Bootstrap. You will also see a change in font colour from black to white.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Bootstrap Tables</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas!</h2>
        <div class="m-4">
            <table class="table table-dark">
                <thead>
                    <tr>
                        <th>Sr. No</th>
                        <th>Name</th>
                        <th>Designation</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Anudeep</td>
                        <td>Engineer</td>
                        <td>anudeep@gmail.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Debarshi</td>
                        <td>Manager</td>
                        <td>debarshi@gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Pramod</td>
                        <td>Associate</td>
                        <td>pramod@gmail.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

 

Output:

Dark Table output

Striped Table

We can also add shades of grey and white between the rows alternatively using the ".table-stripped" class within the <table> tag in Bootstrap. 

If we add table-dark and table-stripped together within the <table> tag, we can make the dark table occur in alternate light and dark rows.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Bootstrap Tables</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas!</h2>
        <div class="m-4">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Sr. No</th>
                        <th>Name</th>
                        <th>Designation</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Anudeep</td>
                        <td>Engineer</td>
                        <td>anudeep@gmail.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Debarshi</td>
                        <td>Manager</td>
                        <td>debarshi@gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Pramod</td>
                        <td>Associate</td>
                        <td>pramod@gmail.com</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Annesha</td>
                        <td>Analyst</td>
                        <td>annesha@gmail.com</td>
                    </tr>
                </tbody>
            </table>

            <table class="table table-dark table-striped">
                <thead>
                    <tr>
                        <th>Sr. No</th>
                        <th>Name</th>
                        <th>Designation</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Anudeep</td>
                        <td>Engineer</td>
                        <td>anudeep@gmail.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Debarshi</td>
                        <td>Manager</td>
                        <td>debarshi@gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Pramod</td>
                        <td>Associate</td>
                        <td>pramod@gmail.com</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Annesha</td>
                        <td>Analyst</td>
                        <td>annesha@gmail.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

 

Output:

Striped Table output

Bordered Table

The bordered table helps you to make a border around the whole table for a better user experience. We can add borders in a table by adding the .table-bordered class within the <table> tag in Bootstrap.

We can also add colours to the border by using .table-bordered and .border-primary together within the <table> tag. This will turn the border colour from black to blue.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Bootstrap Tables</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas!</h2>
        <div class="m-4">
            <table class="table table-bordered">
                <caption>
                    Bordered Table
                </caption>
                <thead>
                    <tr>
                        <th>Sr. No</th>
                        <th>Name</th>
                        <th>Designation</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Anudeep</td>
                        <td>Engineer</td>
                        <td>anudeep@gmail.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Debarshi</td>
                        <td>Manager</td>
                        <td>debarshi@gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Pramod</td>
                        <td>Associate</td>
                        <td>pramod@gmail.com</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Annesha</td>
                        <td>Analyst</td>
                        <td>annesha@gmail.com</td>
                    </tr>
                </tbody>
            </table>

            <table class="table table-bordered border-primary">
                <caption>
                    Bordered Table in Blue Colour
                </caption>
                <thead>
                    <tr>
                        <th>Sr. No</th>
                        <th>Name</th>
                        <th>Designation</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Anudeep</td>
                        <td>Engineer</td>
                        <td>anudeep@gmail.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Debarshi</td>
                        <td>Manager</td>
                        <td>debarshi@gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Pramod</td>
                        <td>Associate</td>
                        <td>pramod@gmail.com</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Annesha</td>
                        <td>Analyst</td>
                        <td>annesha@gmail.com</td>
                    </tr>
                </tbody>
                    <tfoot>
                        <td>Footer</td>
                        <td>Footer</td>
                        <td>Footer</td>
                        <td>Footer</td>
                    </tfoot>
            </table>
        </div>
    </body>
</html>

 

Output:

Bordered Table output

We used the <caption> tag in both tables in the example above. You can see the captions at the end of each table. We also added a footer in the second table, as shown in the output.

Borderless Table

The borderless table helps you to make a table without any borders. We can use these in a table by adding the .table-borderless class within the <table> tag in Bootstrap.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Bootstrap Tables</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas!</h2>
        <div class="m-4">
            <table class="table table-borderless">
                <caption>
                    Borderless Table
                </caption>
                <thead>
                    <tr>
                        <th>Sr. No</th>
                        <th>Name</th>
                        <th>Designation</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Anudeep</td>
                        <td>Engineer</td>
                        <td>anudeep@gmail.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Debarshi</td>
                        <td>Manager</td>
                        <td>debarshi@gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Pramod</td>
                        <td>Associate</td>
                        <td>pramod@gmail.com</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Annesha</td>
                        <td>Analyst</td>
                        <td>annesha@gmail.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

 

Output:

Borderless Table output

Hoverable Table

The hoverable table changes the colour of the row if you take the cursor on any specific row. We can add hovers in a table by adding the .table-hover class within the <table> tag in Bootstrap.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Bootstrap Tables</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas!</h2>
        <div class="m-4">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th>Sr. No</th>
                        <th>Name</th>
                        <th>Designation</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Anudeep</td>
                        <td>Engineer</td>
                        <td>anudeep@gmail.com</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Debarshi</td>
                        <td>Manager</td>
                        <td>debarshi@gmail.com</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Pramod</td>
                        <td>Associate</td>
                        <td>pramod@gmail.com</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>Annesha</td>
                        <td>Analyst</td>
                        <td>annesha@gmail.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

 

Output:

Hoverable Table output

Coloured Table

The coloured table can be executed using the contextual classes. Contextual classes are used to change the colour of rows, columns, backgrounds or anything related to colours. 

There are mainly 8 contextual classes available in Bootstrap.

  1. table-primary (Blue colour)
  2. table-secondary (Grey colour)
  3. table-success (Green colour)
  4. table-danger (Red colour)
  5. table-info (Light blue colour)
  6. table-warning (Yellow colour)
  7. table-light (White colour)
  8. table-dark (Black colour)
     

We can add these classes in the <table>, <thead>, <tbody> <tr>, or <td> tag.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Bootstrap Tables</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas!</h2>
        <div class="m-4">
            <table class="table">
                <thead>
                    <tr class="table-primary">
                        <th>Sr. No</th>
                        <th>Name</th>
                        <th>Designation</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="table-secondary">
                        <td>1</td>
                        <td>Anudeep</td>
                        <td>Engineer</td>
                        <td>anudeep@gmail.com</td>
                    </tr>
                    <tr class="table-success">
                        <td>2</td>
                        <td>Debarshi</td>
                        <td>Manager</td>
                        <td>debarshi@gmail.com</td>
                    </tr>
                    <tr class="table-danger">
                        <td>3</td>
                        <td>Pramod</td>
                        <td>Associate</td>
                        <td>pramod@gmail.com</td>
                    </tr>
                    <tr class="table-info">
                        <td>4</td>
                        <td>Annesha</td>
                        <td>Analyst</td>
                        <td>annesha@gmail.com</td>
                    </tr>
                    <tr class="table-warning">
                        <td>5</td>
                        <td>Amit</td>
                        <td>Marketing Analyst</td>
                        <td>amit@gmail.com</td>
                    </tr>
                    <tr class="table-light">
                        <td>6</td>
                        <td>Ashish</td>
                        <td>Teacher</td>
                        <td>ashish@gmail.com</td>
                    </tr>
                    <tr class="table-dark">
                        <td>7</td>
                        <td>Rupam</td>
                        <td>CA</td>
                        <td>rupam@gmail.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

 

Output:

Coloured Table output

Responsive Table

Responsive tables can be made to allow for horizontal scrolling on mobile devices. We can make a table responsive just by adding any table inside the <div></div> with a .table-responsive class in Bootstrap.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Bootstrap Tables</title>
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
        <style>
            table * {
                white-space: nowrap;
            }
        </style>
    </head>
    <body>
        <h2>Welcome to Coding Ninjas!</h2>
        <div class="m-4">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Sr. No</th>
                            <th>Name</th>
                            <th>Designation</th>
                            <th>Email</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Anudeep</td>
                            <td>Engineer</td>
                            <td>anudeep@gmail.com</td>
                            <td>
                                At Coding Ninjas, our mission is to continuously innovate the
                                best ways to train the next generation of developers and to
                                transform the way tech education is delivered.
                            </td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Debarshi</td>
                            <td>Manager</td>
                            <td>debarshi@gmail.com</td>
                            <td>
                                At Coding Ninjas, our mission is to continuously innovate the
                                best ways to train the next generation of developers and to
                                transform the way tech education is delivered.
                            </td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Pramod</td>
                            <td>Associate</td>
                            <td>pramod@gmail.com</td>
                            <td>
                                At Coding Ninjas, our mission is to continuously innovate the
                                best ways to train the next generation of developers and to
                                transform the way tech education is delivered.
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>

 

Output:

Responsive Table output

Frequently Asked Questions

How to set Bootstrap table column width?

To give the table column an auto width, add the class .w-auto to the table element.

Define scope in Bootstrap tables.

According to the definition of scope, the cell is either a header for a row, column, or set of rows or columns.

Is Bootstrap a framework or a library?

Bootstrap is a CSS framework for creating responsive and mobile websites.

Is Bootstrap best for responsiveness?

Bootstrap is mobile-friendly and responsive. Its six-tier grid classes give more logical control over the layout.

What is included in the Bootstrap bundle?

The Bootstrap bundle contains CSS files, Javascript files, Bootstrap source code, Precompiled Bootstrap, etc.

Conclusion

This article discusses the topic of Bootstrap tables. In detail, we have seen the definition of the Bootstrap tables, attributes of Bootstrap tables, and types of tables with their implementation.

We hope this blog has helped you enhance your knowledge of Bootstrap tables. If you want to learn more, then check out our articles.

And many more on our platform Coding Ninjas Studio.

Refer to our Guided Path to upskill yourself in DSACompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio!

But suppose you have just started your learning process and are looking for questions from tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problemsinterview experiences, and interview bundles for placement preparations.

However, you may consider our paid courses to give your career an edge over others!

Happy Learning!

Live masterclass