Tables are existing in almost all applications (web, desktop or mobile program) and they are a main element in showing information to the final user. The HTML tables are actually used to present data in framework method such as columns and rows . With using Bootstrap 4 framework you are able to easily enhance the appearance of the table.
In the present day, with the significance that the user interface has, knowing how to enhance the appeal of a Bootstrap Table Vertical becomes as relevant as it is. In this scenario, one of the systems that have become reference is Bootstrap. This front-end framework, within lots of other features , delivers a amount of elements for designing and enhancing the presentation of various components, such as tables.
To mode a table through Bootstrap, simply include the table class to the <table>
tag, and some graphic formatting will just be applied , as presented on the screenshot .
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Among one of the new tables in Bootsrap 4 is the inverse tables. Class .table-inverse
can easily replace the colors of the table.
<table class="table table-inverse">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
For tables there are additionally some classes that help you to add many different styles to a table, they are:
● table-striped
Toggles the color of table rows;
● table-bordered
Adds border to table;
● table-hover
Switches on the highlight of a Bootstrap Table Datatable line when we hover the mouse arrow over it;
● table-condensed
Decreases the height of table rows, helping make it more compact.
To add all of these designs, just simply add the wanted classes to the: <table>: <table class="table table-striped table-bordered table-condensed table-hover">
Like default and inverted tables, apply one of two modifier classes to make <thead>
appear dark or light gray.
img
<table class="table">
<thead class="thead-inverse">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-default">
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Zebra-like stripes can be put in with the .table-striped
class, an good example
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
To generate a hover side effect in the rows of your table put the .table-hover
class:
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
You can certainly add in the borders on every single table slide and a cell through the .table-bordered
class:
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">4</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Wherever you intend to make your table more small - on that occasion you will be able to cut cell padding in half through this class: .table-condensed
.
Bear in mind that, while Bootstrap 4 uses .table-sm
to condense a table, Bootstrap 3 uses .table-condensed
. Each cut cell padding in half.
<table class="table table-sm">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Use the contextual classes to color a table cells (<td>
) and table rows (<tr>
):
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-success">...</td>
<td class="table-warning">...</td>
<td class="table-danger">...</td>
<td class="table-info">...</td>
</tr>
Changing the rows of a table Bootstrap 3 does not make use of the .table-
prefix for its contextual classes. Bootstrap 3 uses .active
while Bootstrap 4 uses .table-active
. Other than that, both versions work with the same 5 contextual keywords (active, success, info, warning, danger). Below you are able to see the description about each and every one practical option:
● active: Uses the focus color tone to the table row or table cell
● success: Signifies a positive or successful action
● info: Signifies a neutral information change or action
● warning: Signifies a notice that you may need attention
● danger: Signifies a potentially negative or dangerous action
To create a responsive table - use the .table-responsive
class. Table scrolls in the horizontal position on gadgets that less than 768px. If the device is larger sized than 768px wide, then you will see no difference :
Bootstrap 4 allows you to add the .table-responsive
class to the actual <table> element. Bootstrap 3 tables required that you add that class to a parent <div> element.
Bootstrap tables authoritative documents