Lesson 6: Tables in Bootstrap 5

What are tables in Bootstrap ? How do you create tables in Bootstrap ? Let's find out together with TipsMake.com!

 

If you're a professional programmer, the concept of tables is probably not unfamiliar to you. However, if you're new to this field, tables might seem quite strange. They're not simply the typical tables; there are many different variations of table creation in programming.

Table - What is a table in HTML programming?

HTML tables are used to present data in a grid format, such as rows and columns. Using Bootstrap, you can easily and quickly improve the visual appeal of your tables.

Bootstrap has long been known as a framework that provides users with high-quality, free open-source web development code. With Bootstrap, you have all the elements to create a complete website, from containers and tooltips to tables. In this Bootstrap lesson, we will explore tables in detail, including how to create basic tables and other related issues.

Table elements

Bootstrap provides a clean layout for building tables. Some of the table elements supported by Bootstrap are:

1. - A wrapper element to display data in table format.
2. - A container for table header rows () to label the columns in the table.
3. - The container for the table rows () in the table content.
4. - The container for a set of table cells (or) that appear on a row.
5.  - Default table cell.
6.  - Special table cells for column (or row, depending on the range and location) labels. Must be used in
7.  - Describe or summarize what the table contains.

 

Basic table

Basic tables in Bootstrap 5 will have some padding and horizontal dividers. The `.table` class adds basic styling to the table, as shown in the example below.

 Ví dụ Bootstrap - TipsMake.com.com 

Basic table

The `.table` class adds basic styling to the table, a little padding, and horizontal lines:

Surname	Name	Year old
Nguyen	Jolie	25
Bare	Peace	26
High	Duyen	27

The code above will produce the following table:

 

Color alternating rows

If you want to make the rows in the table easier to read by using alternating colors, simply add the `.table-striped` class as shown in the example below:

 Ví dụ Bootstrap - TipsMake.com.com 

Alternating color palette

The `.table-striped` class adds alternating colors to the rows in a table:

Surname	Name	Year old
Nguyen	Jolie	25
Bare	Peace	26
High	Duyen	27

A table with alternating colored rows would look like this:

Add borders to the table.

If you want to add a border to every cell in the table, simply use the `.table-bordered` class as follows:

 Ví dụ Bootstrap - TipsMake.com.com 

Add a border to the board.

The `.table-bordered` class will add a border to every cell in the table.

Surname	Name	Year old
Nguyen	Jolie	25
Bare	Peace	26
High	Duyen	27

 

A table with the class `.table-bordered` would look like this:

The item changes color when you move the mouse.

To add a color-changing effect when you hover over a row, use the `.table-hover` class . The rows in the table that are hovered over will then have their background color change to gray, as shown in the example below:

 Ví dụ Bootstrap - TipsMake.com.com 

The item changes color when you hover your mouse over it.

The `.table-hover` class will indicate which row is being hovered over by adding a gray background color to the row:

Surname	Name	Year old
Nguyen	Jolie	25
Bare	Peace	26
High	Duyen	27

When you hover your mouse over a row, the row will be colored as shown below:

Dark color palette, black

If you want your table to have a black background and white text, use the `.table-dark` class as shown below:

 Ví dụ Bootstrap - TipsMake.com.com 

Black background board

The `.table-dark` class will add a black background to the table:

Surname	Name	Year old
Nguyen	Jolie	25
Bare	Peace	26
High	Duyen	27

 

A whiteboard with a black background would look like this:

The black background changes color when you hover your mouse over it.

Quite simply, to create this type of table, you just need to combine two classes: `.table-dark` and `.table-hover` . Rows that are hovered over will then turn gray, as shown in the example below:

 Ví dụ Bootstrap - TipsMake.com.com 

The black background changes color when you move the mouse cursor.

Surname	Name	Year old
Nguyen	Jolie	25
Bare	Peace	26
High	Duyen	27

Running the code above will produce a table like this:

Similarly, to create a black table with alternating rows of black and black background colors, you can combine the `.table-dark` and `.table-striped` classes .

Create a borderless table in Bootstrap

The `.table-borderless` class will remove all borders around the cells of a table. Try the example below to see the result:

 Ví dụ Bootstrap - TipsMake.com.com 

Borderless board

Surname	Name	Year old
Nguyen	Jolie	25
Bare	Peace	26
High	Duyen	27

The table created will have no borders at all:

 

Table by context

Context classes are used to color entire tables, rows, or cells  . These include: .table-primary , .table-success , .table-info , .table-warning , .table-danger , .table-active , .table -secondary , .table-light , and .table-dark .

If you learned about color in Bootstrap in the previous lesson, you'll find these classes very familiar, right?

 Ví dụ Bootstrap - QuanTriMang.com 

Contextual Color Palette

Context classes are used to color entire tables, rows, or cells.

Describe	Class Name
Default	Default
Primary	table-primary
Solar	table-success
Danger	table-danger
Info	table-info
See	table-warning
Active	table-active
Middle	table-secondary
Light	table-light
Dark	table-dark

The following context classes can be used and their corresponding colors:

Color the table header.

To add a background to the table header row, you can use any context table class inside thetag :

 Ví dụ Bootstrap - TipsMake.com.com 

Color the header row

Surname	Name	Year old
Nguyen	Jolie	25
Bare	Peace	26
High	Duyen	27

Surname	Name	Year old
Nguyen	Jolie	25
Bare	Peace	26
High	Duyen	27

 

The colored header row would look like this:

Note : On Bootstrap 4, instead of using `table-.`, you will use the `.thead-dark` class (to create a dark header) and `.thead-light` (to create a light header).

Create a small table

The `.table-sm` class creates a smaller table by halving the padding of the cells:

 Ví dụ Bootstrap - TipsMake.com.com 

Create a small table

Surname	Name	Year old
Nguyen	Jolie	25
Bare	Peace	26
High	Duyen	27

The board will have its padding reduced and will look like this:

Adaptation board

The `.table-responsive` class will add scroll bars to the table when needed, typically when the table width exceeds the display screen width.

.

For example:

Adaptation board

#	Surname	Name	Year old	City	Country	Sex	A	B	C	D	E	F	G	H	I	K	L	M
1	Nguyen	Gem	35	Tien Giang	Vietnam	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male	Male

When the table is wider than the viewing screen, you will see a horizontal scroll bar at the bottom of the table, as shown in the image:

You can decide when to add scroll bars to the table based on the screen width:

Class	Screen width
.table-responsive-sm	< 576px
.table-responsive-md	< 768px
.table-responsive-lg	< 992px
.table-responsive-xl	< 1200px
.table-responsive-xxl	< 1400px