Bootstrap has a wide variety of styling tables. We can style tables with color, borders, and other customization options. Likewise, we can also make the basic HTML tables responsive according to the desired screen size.
<table> Content of the Table <table>
We replace the subclassName with the subclass or attribute we aim to include.
Here is a list of subclasses that are available in Bootstrap for adding borders, colored headers or rows, striped patterns, and more:
Subclass | Syntax | Description |
|
| Removes all existing borders from the table |
|
| Creates alternative dark and light rows in the table |
|
| Adds a dark color to the header of the table |
|
| Adds a light gray color to the header of the table |
|
| Adds a dark background to the table |
|
| Adds a light gray background to the table |
|
| Adds a hovering effect to the rows due to which the row changes color whenever the cursor hovers over it |
|
| Reduces the size of the table by cutting the padding in the cells by half |
This class adds borders to all the sides and cells of the table which improves its look and feel.
<table> tag, we add the table-bordered class to add borders to all the sides and cells of the respective table.Let’s see how to use striped tables in the example below:
In the example above, we have a table with 3 observations of students. We’ll use bootstrap to make it a striped table.
.table-striped subclass to generate a striped table.