Bootstrap Tables

Bootstrap offering a nice and clean layout for making tables. Some of the table elements supported by Bootstrap are:

Tag Description
<table> Wrapping element for displaying data in a tabular format
<thead> Container element for table header rows (<tr>) to label table columns
<tbody> Container element for table rows (<tr>) in the body of the table
<tr> Container element for a set of table cells (<td> or <th>) that appears on a single row
<td> Default table cell
<th> Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
<caption> Description or summary of what the table holds.

Basic Table

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.

Striped Table

By using the .table-striped class, you will get zebra-striping on rows within the <tbody> as seen in the following example:

Bordered Table

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:

Hover Table

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:

Condensed Table

Add .table-condensed to make tables more compact by cutting cell padding in half.

Contextual classes

The Contextual classes displayed in following table will allow you to modify the background color of your table rows or individual cells.

Class Description
.active Applies the hover color to a particular row or cell
.success Indicates a successful or positive action
.warning Indicates a warning that might need attention
.danger Indicates a dangerous or potentially negative action

These classes can be applied to <tr>, <td> or <th>.

Responsive tables

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.

Leave a Reply

Your email address will not be published. Required fields are marked *