If you are building a responsive website and want your data to look clean, then you must learn how to use a Bootstrap Table. It helps you save time because it has pre-designed styles and layouts so that you don’t waste time writing all the CSS from scratch. While tables in HTML provide you with basic grid layouts, Bootstrap Tables help you to add styling and structure. This makes it easier for you to understand the data and makes it look better on the screen.
In this blog, we will talk about Bootstrap tables and how you can implement them. So let’s get started!
Table of Contents:
Table Elements Supported by Bootstrap
Bootstrap provides you with various table elements that help to make your tables look better and easier to understand. Given below are some of the important elements that you can use in Bootstrap Table:
1. <table>: This is the main tag that is responsible for holding your table data and gives it a structured format.
2. <thead>: It is used in the top part of the table where you write your column headings (inside the <tr> rows).
3. <tbody>: This consists of the table data. All your data rows go inside this section.
4. <tr>: This stands for “table row.” It is used to create a single row in the table. You can put multiple <td> or <th> cells inside it.
5. <td>: This is a normal cell in the table where you place your data.
6. <th>: This is a special cell that is used for headers or labels, which is usually placed inside the <thead> section.
7. <caption>: This is like a title or description for the table. By default, it shows up at the bottom, but if you want it at the top, you can add the class .caption-top.
Boost Your Resume With Real Skills
Join Our Web Dev Course
Bootstrap Table Example
Bootstrap tables are not automatic; therefore, you have to use the .table to any <table> tag. A basic Bootstrap is just a regular HTML table with clean styles like light padding and lines between the rows, so that it is easier for you to read. An example of a basic Bootstrap table is given below:
Example:
The entire HTML code, consisting of the above Bootstrap table, is given below:
Code:
Output:
Explanation:
The above HTML code creates a plain web page with a styled Bootstrap Table. It includes Bootstrap via CDN for styling, then it uses a <caption> for the title of the table. After that, it separates the headers and data using <thead> and <tbody>. At last, Bootstrap JS is added for its full functionality.
Types of Bootstrap Tables
Here, we will talk about the different types of Bootstrap tables along with their codes. So let’s get started!
1. Tables with Striped Rows
To make the table rows look better, you can add stripes to them. Just add the .table-striped class along with the .table. This will give the other row a slightly darker background, which makes it easier for you to read.
Example:
The entire HTML code, consisting of the above Bootstrap table, is given below:
Code:
Explanation:
The given HTML code creates a basic webpage that shows a striped table. It is made up of Bootstrap CSS from a CDN within the <head> tag. Inside the <body> tag, there is a container along with a heading and a table. The table uses two classes: .table and .table-striped to add basic styling and alternating row colors so that it becomes easy to read. Bootstrap and JavaScript are added at the end.
2. Bordered Table
If you want to add borders around each cell of the table, you just need to add .table-bordered class along with the .table class. This will make your table look more structured and neat.
Example:
The entire HTML code, consisting of the above Bootstrap table, is given below:
Code:
Output:
Explanation:
The above HTML code is used to create a simple webpage. It consists of a bootstrap table that has borders around all the cells. It uses the .table and .table-border classes to style and organize the data.
Get 100% Hike!
Master Most in Demand Skills Now!
3. Borderless Table
In order to remove all the borders from a table, you can use the .table-borderless class along with the .table class. This makes the table look clean and simple without any lines around the cells.
Example:
The entire HTML code, consisting of the above Bootstrap table, is given below:
Code:
Output:
Explanation:
The above HTML code is used to create a simple webpage that consists of a Bootstrap table with no borders. It uses the .table class and .table-borderless class in order to show state and capital data in a simple layout.
4. Tables with Hover Rows
If you want to highlight a row when you pass the mouse over it, then you must apply the .table-hover class together with the .table one. This will make each row on the table glow a little when you hover the mouse over it.
Example:
The entire HTML code, consisting of the above Bootstrap table, is given below:
Code:
Output:
Explanation:
The above HTML code is used to create a simple webpage. It consists of a Bootstrap table in which every row is highlighted when you move the cursor over it. It uses the .table and .table-hover classes.
5. Condensed Table
If you want your table to take up less space, you can use the .table-sm class along with the .table class. This makes the rows tighter by reducing the padding. This becomes helpful when you want to display a lot of data in a small space.
Example:
The entire HTML code, consisting of the above Bootstrap table, is given below:
Code:
Output:
Explanation:
The above HTML code is used to create a compact Bootstrap table. It uses the .table class along with the .table-sm class to reduce the row padding.
6. Tables with Contextual Classes
The background colors of the particular rows or cells of the table can be applied using special Bootstrap classes as well. These are called contextual classes. You need to add contextual classes to <tr> for rows or <td> for individual cells in the table. This makes your table more colorful and easier to understand. Some contextual classes for bootstrap tables are .table-primary, .table-secondary, .table-success, .table-danger, .table-info, .table-light, .table-dark.
Example:
The entire HTML code, consisting of the above Bootstrap table, is given below:
Code:
Output:
Explanation:
The above code is used to create a table with different background colors on each row. It uses contextual classes like .table-warning, .table-success, etc. These classes help to highlight and categorize the rows visually.
7. Responsive Tables
Making the table responsive means it will scroll horizontally on small screens instead of spoiling the layout. In order to do this, you need to wrap your <table> tag inside a <div> tag along with the class .table-responsive. You can also control when the table becomes responsive by using classes like .table-responsive-sm, .table-responsive-md, depending on the screen size.
Example:
The entire HTML code, consisting of the above Bootstrap table, is given below:
Example:
Output:
Explanation:
The above HTML code shows a dark-styled table that is wrapped inside a .table-responsive container. This aids the table to move horizontally on small screens, in order to have your layout organized.
Best Practices for Using Bootstrap Tables
1. You have to try Bootstrap Table on mobile to test responsiveness.
2. Use a few columns for easier reading.
3. You should avoid placing too much content or nesting elements inside the cells of the table.
4. Smartly combine the Bootstrap classes rather than the addition of custom CSS.
Conclusion
Bootstrap Table makes it super easy for you to create clean, responsive, and well-styled tables without writing a lot of custom CSS. Whether you want striped rows, borders, hover effects, compact spacing, or responsive layouts, Bootstrap always provides a ready-made class to handle it. By using simple class names, you can build powerful tables that look great on all devices. So next time you’re working on a webpage, you should use a Bootstrap Table to save time and make your data look more polished. To learn more about Bootstrap, enroll in our Web Development Course.
Bootstrap Tables – FAQs
Q1. Can I customize the colors of a Bootstrap Table?
Indeed, table colors may be altered with the help of custom CSS or Bootstrap utility classes.
Q2. Does Bootstrap Table support pagination?
Bootstrap doesn’t provide built-in pagination for tables, but you can add it using JavaScript or plugins.
Q3. Can I use Bootstrap table without an internet connection?
Sure, you can download Bootstrap files and refer to them locally without a CDN.
Q4. Is it possible to combine multiple table classes?
Indeed, you can combine classes like .table-striped, .table-bordered, and .table-hover for best styling.
Q5. Does Bootstrap Table support sorting and filtering?
Not automatically, but you can simply add sorting and filtering capabilities by using plugins like DataTables.