Creating Tables in Bootstrap

Before diving into the details of creating tables in Bootstrap, Mytour will provide a brief overview of tables.

Creating Tables in Bootstrap

1. What is a Table?

In HTML, a table is used to present data in a grid format, such as rows and columns. Utilizing Bootstrap makes it easy and quick to create tables.

2. Creating a Simple Table in Bootstrap

To create simple tables with horizontal lines and spacing between content and borders (default 8px), simply add the .table class from Bootstrap to the table element.

Example: In the example below, we will create a straightforward table:

The resulting output looks like this:

Additionally, we can also generate a table with light text color and dark background by adding the .table-dark class to the .table class as shown in the example below:

The resulting output looks like this:

Tip: We can add the .table-dark class to the .table element to create a table with a dark background.

3. Creating a Table with Striped Rows in Bootstrap

To create a table with striped rows, simply add the .table-striped class from Bootstrap to the .table class.

To achieve this, simply add background-color to the tbody element using the CSS selector :nth-child. Refer to the example below:

The resulting output looks like this:

Similarly, to create a striped table with a dark background and bright text color, just add the .table-dark class to the table as shown in the example below:

The resulting output looks like this:

4. Creating Tables with Borders in Bootstrap

To add borders to all cells in the table, simply include the .table-bordered class from Bootstrap in the .table class.

Example: In the following example, we add borders to all cells in the table by including the .table-bordered class from Bootstrap in the .table class:

The resulting output looks like this:

5. Creating Tables without Borders in Bootstrap

To create tables without borders in Bootstrap, simply add the .table-borderless class to the .table element.

Example: In the following example, we will create tables without borders in Bootstrap:

The resulting output after adding the .table-borderless class to the .table element looks like this:

6. Activate Hover State on Rows in the Table

Additionally, we can activate hover state (mouse-over) on rows within the tbody element by adding the .table-hover class from Bootstrap to the .table class.

Example: In the example below, we activate hover state on rows in the table:

The resulting output looks like this:

7. Create Small or Compact Tables

To create compact tables, saving space, simply add the .table-sm class to the .table class. The .table-sm class creates compact tables by reducing the space between content in cells and the border.

Example: In the example below, we create small tables in Bootstrap:

The resulting output looks like this:

8. Set Color for Table Header

To specify different background colors for the table header, we use the classes .thead-light or .thead-dark on the thead element.

Example 1: In the example below, we use the .thead-light class to create a table:

The resulting output looks like this:

Example 2: In the example below, we use the .thead-dark class to create a table:

The resulting output looks like this:

9. Customize Cells and Rows in Table

To emphasize data in cells and rows in the table, we simply need to apply background colors to these cells and rows.

Example: refer to the example below:

The resulting output looks like this:

10. Create Responsive Tables in Bootstrap

In addition, if we want, we can create responsive tables that allow horizontal scrolling on small-sized screens.

To create responsive tables, simply place the table inside a div element and apply the .table-responsive class to it. Additionally, we can specify when the table displays a scroll bar based on the device screen width using the .table-responsive{-sm|-md|-lg|-xl} classes.

Example: In the example below, we create a responsive table:

The resulting output looks like this:

In this tutorial, Mytour has guided you through Bootstrap lessons on creating tables. If you have any questions or need clarification, feel free to leave your comments below the article.

In the next lesson, Mytour will guide you further on how to create lists in Bootstrap.