Learn Different Tables Type in Bootstrap v4

0
2016
Tables Type

Tables Type
Table in HTML is a well-known web element and is used on various websites since ages. Bootstrap v4 has added something new as an improvement. The following are the features for Tables Type in Bootstrap v4.
1. Default Table in Bootstrap v4 [class=”table”]
Let’s understand the various HTML tags for a table.

  • We create table in HTML with a fixed tag <table>that ends with tag </table>
  • To define a row in table, we use tag <tr>as an opening tag and tag </tr> as a closing tag.
  • Similarly, a column in table is defined with <td> as an opening tag and </td> as closing tag.
  • The very first row in table forms a heading row that may have one or more columns. Columns in such heading row are defined with <th> as an opening tag and </th> as a closing tag.
  • A row that forms the header of the table encloses the row and the column tags between<thead></thead> tags.
  • Similarly, all non-header rows and columns are enclosed between <tbody></tbody>tags.

A default table in Bootstrap v4 has the class as .table along with tag. The following is an example of a default table in Bootstrap v4.

Output: Default table output is as follows.
Default Table
2. Inverse Table in Bootstrap v4 [class=”table table-inverse”]
We can inverse the color of above default table by simply using the class .table-inverse. In this case, the color of text becomes white and the background as black. The following is an example of an inverse table in Bootstrap v4.

Output:Inverse table output is as follows.
InverseTable
3. Table Head Inverse options in Bootstrap v4 [class=”thead-inverse” or “thead-default”]
Instead of Inversing the entire table, we can just inverse the head of the table by using either .thead-inverse or .thead-default classes. The following is an example on the table head inverse option in Bootstrap v4.

Output: Table head inversion options output is as follows.
InverseHeadOption
4. Striped Table in Bootstrap v4 [class=”table-striped”]
Stripped table has a shade of alternate dark and light color on the rows in a table. We can create a zig-zag pattern by using the class .table-striped. The following is an example of a striped table in Bootstrap v4.

Output: Striped table output is as follows.
StripedTable
5. Bordered Table in Bootstrap v4 [class=”table-bordered”]
A bordered table will display the border around rows and columns in a table. We can create a bordered table by using the class .table-bordered. The following is an example of a bordered table in Bootstrap v4.

Output: Bordered table output is as follows.
BorderedTable
6. Mouse Hover Table in Bootstrap v4 [class=”table-hover”]
Mouse hover table will highlight the row on which we hover the mouse. We can create a mouse hover table by using the class .table-hover. The following is an example of a mouse hover table in Bootstrap v4.

Output: Mouse hover table output is as follows.
HoverTable
7. Context Table in Bootstrap v4
We can use the following classes at row or column level in a table to explain the context of that row or column as successful, active, neutral, warning, dangerous, etc.

  • Class .table-active is used to hover the background color which is applied to row or cell level.
  • Class .table-success is used to display a successful or positive action at row or cell level.
  • Class .table-info is used to display a neutral or informative content at row or cell level.
  • Class .table-warning is used to display a warning that requires an attention at row or cell level.
  • Class .table-danger is used to display a dangerous or harmful action at row or cell level.

The following is an example of a context table in Bootstrap v4.

Output: Context table output is as follows.
ContextTable
8. Responsive Table in Bootstrap v4
A responsive table shrinks to the size of the viewport of a particular device. We can create a responsive table by using a class .table-responsive within the <div> element tag that encapsulates a table. The following is an example of a responsive table in Bootstrap v4.


Output: A responsive table output is as follows.
ResponsiveTable
9. Reflow Table in Bootstrap v4
Reflow table are designed to adjust to the shrink space and it converts rows in columns and vice-versa. We can create a reflow table by using class .table-reflow within the <table> tag element. The following is an example of a reflow table in Bootstrap v4.

Output: Reflow table output is as follows.
ReflowTable
10. Small table in Bootstrap v4
We can use a small table when we need to display a large of elements (rows and columns) within a limited size of viewport. We can create small table by using class .table-sm. The following is an example of small table in Bootstrap v4.

Output:Small table output is as follows.
Conclusion
In this chapter, we have explored several new classes for HTML table that are introduced in Bootstrap v4 along with practical examples.

LEAVE A REPLY

Please enter your comment!
Please enter your name here