Bootstrap offering a nice and clean layout for making tables. Some of the table elements supported by Bootstrap are:
||Wrapping element for displaying data in a tabular format
||Container element for table header rows (<tr>) to label table columns
||Container element for table rows (<tr>) in the body of the table
||Container element for a set of table cells (<td> or <th>) that appears on a single row
||Default table cell
||Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
||Description or summary of what the table holds.
If you need a basic and clean table style with some light padding and horizontal dividers, use the base class of “.table” to any table as you can see the following example:
Optional Table Classes
There are a small number of additional classes that you can use to style the markup along with the base table markup and the .table class. Following segments will provide you a glance of all these classes.
By using the .table-striped class, you will get zebra-striping on rows within the <tbody> as seen in the following example:
By using the .table-bordered class, you will get borders on every element and rounded corners around the whole table as shown in the following model:
By putting the .table-hover class, a light gray background will be displayed to rows as the cursor hovers over them, as seen in the following example:
Add .table-condensed to make tables more compact by cutting cell padding in half.
The Contextual classes displayed in following table will allow you to modify the background color of your table rows or individual cells.
||Applies the hover color to a particular row or cell
||Indicates a successful or positive action
||Indicates a warning that might need attention
||Indicates a dangerous or potentially negative action
These classes can be applied to <tr>, <td> or <th>.
By wrapping every .table in .table-responsive class, you will build the table scroll horizontally up to small devices which resolution are under 768px. While screening on everything larger than 768px wide, you will not observe any difference in these tables.