When you create tables for your website or webpage, you can easily represent a massive amount of data in a clear and organized manner. Bootstrap tables deliver extra advantages like responsiveness and the potential to exploit the table styles. The <table> components are quite well known globally, especially for gizmos like calendars and clocks. Bootstrap tables allow you to easily participate in creating an organized table for your planners. The base class of the Bootstrap table is .table, and you can apply it to any <table> tag and expand them with extra modifier classes or customized kinds whenever you like. But please note that not every table style originated in Bootstrap, which means you can make nest tables individually from the parent element. Today, we will show you how to make nest tables in Bootstrap and organize them quickly to make your website look neat and clean.
What is a Table?
You can create HTML tables that will help you represent the data in a grid manner by applying rows and columns. When you are using Bootstrap, you can simply enhance how the tables appear fast and smoothly. You can create a simple table in Bootstrap by using the basic class and table element that we just introduced you to in the introduction: .table class and <table> element. When you are creating a table with basic styling, it will come with horizontal partitions, and a small cell padding comes with it by default. For example, try the code given below:
<table class=”table”>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rue</td>
<td>Lee</td>
<td>ruelee@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Pan</td>
<td>peterpan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Gray</td>
<td>johngray@mail.com</td>
</tr>
</tbody>
</table>
When the output comes, it will create the first row for first name, last name, and email. And beneath that row, the names Peter, John, and Rue will appear with their email addresses and last names in a column. This was the basic type of bootstrap table, but if you want to explore many other available options, you will have to keep reading this tutorial.
How to Create Colored Tables?
There are .table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, and .table-dark, etc. classes available in bootstrap that allows you to use colors on your tables. For instance, if you want to create a dark version of your tables, like the tables with light texts on them, but the background will be dark, you can add the .table-dark class to the .table element. The example looks like this:
<table class=”table table-dark”>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rue</td>
<td>Lee</td>
<td>ruelee@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Pan</td>
<td>peterpan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Gray</td>
<td>johngray@mail.com</td>
</tr>
</tbody>
</table>
When the output appears, you will see that the table is written in white color on a dark solid background. We also call these classes contextual classes, and you can use them alternatively for your bootstrap tables. For instance, you can add the .table-success class to the .table element, and the table will appear on a green background:
<table class=”table table-success”>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rue</td>
<td>Lee</td>
<td>ruelee@mail.com</td>
</tr>
<tr>
<td>2</td>
<td>Peter</td>
<td>Pan</td>
<td>peterpan@mail.com</td>
</tr>
<tr>
<td>3</td>
<td>John</td>
<td>Gray</td>
<td>johngray@mail.com</td>
</tr>
</tbody>
</table>
When the output appears, instead of a dark and solid background, you will see a light green colored background, and the color of the text will be black. You can apply these contextual classes on the .table element and build a colored version of the table with strips, hovers, borders, compacts, etc. Likewise, you can apply the contextual classes to highlight the row of the table as given in the example:
<table class=”table”>
<thead>
<tr>
<th>#</th>
<th>Bill</th>
<th>Payment Date</th>
<th>Payment Status</th>
</tr>
</thead>
<tbody>
<tr class=”table-primary”>
<td>1</td>
<td>Credit Card</td>
<td>04/07/2021</td>
<td>Waiting for updates</td>
</tr>
<tr class=”table-secondary”>
<td>2</td>
<td>Insurance</td>
<td>02/07/2021</td>
<td>Cancelled</td>
</tr>
<tr class=”table-success”>
<td>3</td>
<td>Water</td>
<td>01/07/2021</td>
<td>Paid</td>
</tr>
<tr class=”table-info”>
<td>4</td>
<td>Internet</td>
<td>05/07/2021</td>
<td>Change plan</td>
</tr>
<tr class=”table-warning”>
<td>5</td>
<td>Electricity</td>
<td>03/07/2021</td>
<td>Pending</td>
</tr>
<tr class=”table-danger”>
<td>6</td>
<td>Telephone</td>
<td>06/07/2021</td>
<td>Due</td>
</tr>
<tr class=”table-light”>
<td>7</td>
<td>Car Service</td>
<td>08/07/2021</td>
<td>Confirm by a call</td>
</tr>
<tr class=”table-dark”>
<td>8</td>
<td>Gas</td>
<td>06/07/2021</td>
<td>Payment failed</td>
</tr>
</tbody>
</table>
The above code, after applying, will give you a table with mixed colors highlighted on the texts of payment and payment status columns, as well as on the bill column. However, while building tables on Bootstrap, you will have to remember that the border styles, table variants, and active styles do not originate from nested tables. This is a perfect example of creating a planner with Bootstrap.
How Does Nesting Work?
> is a child combinator selector that works in CSS. It blocks the styles from circulating to nested tables. When nesting tables, you will have to focus on the ‘td’s, and ‘th’s in the thead, tbody, and tfoot because the selector gets lengthy without them on it. And for that reason, we use the .table > :not(caption) > * > * selector that allows us to pick out the ‘td’s and ‘th’s in the .table element but not from the possible nested tables. If you apply the <tr>s as a direct child of a table, the <tr> will be included in the <tbody> automatically, which helps the selectors target the ‘td’s quickly. Nesting and building tables in bootstraps naturally come with many great advantages that are mentioned in the section below.
Key Features of Bootstrap Tables
Bootstrap tables are approved by The MIT License, and they are free of cost. You can modify and use bootstrap tables on the go, and they also come with a plugin for your website to help you with that matter. Here are the most important features of bootstrap tables that convince the users to consider the option:
- Responsive web design
- Available in JSON format
- Completely configurable
- Twitter for Bootstraps is available in different versions
- Simple yet robust pagination
- Easy column sorting with one click
- Easy multiple or single row selections
- Display/Mask columns
- Display/Mask headers
- Display/Mask footers
Conclusion
You can get Bootstrap for creating a table manually by yarning it using the yarn add bootstrap-table code. You can also install the bootstrap table using npm: npm install bootstrap-table. The examples we have given in this post are to help you understand how to create different types of tables on Bootstrap. But there are many other types that you might like to apply for web page content, and to learn about those styles; you can go to the official website of Bootstrap and check out their coding styles and guides.