What are tables in Bootstrap? How do you create tables in Bootstrap? Lets find out together with TipsMake.com!
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:
- A wrapper element to display data in table format.- A container for table header rows () to label the columns in the table.- The container for the table rows () in the table content.- The container for a set of table cells (or) that appear on a row.
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 |