Bootstrap Table

One of the most common layout elements, when working with Bootstrap is the table rendering. The term tables is used in different contexts to refer to the Bootstrap grid layout system, a standard HTML table, or a grid-view component or widget. In this blog, we will look at the standard ways of styling a table in Bootstrap, as well as using a responsive grid view component, nested in a Bootstrap element.

Getting Started

Utilizing the Bootstrap styling for a standard table is very straightforward. You simply need to add the .table class to the declaration of the table in the html. The example which follows demonstrates just that. It includes one extra element - a panel in which the table is nested. This is a common scenario, since many pages host each element in a separate container, such as a panel. 

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

The result is demonstrated below:

Since our table is nested in a panel, there is an extra border before the table is rendered, following the panel main data.

Striped Rows

Rendering a uniformly colored table on the page may prove difficult to read for the end user. Introducing stripes allows colorization of every other row in the table. To enable this, you simply need to use the .table-striped class in the declaration of your table. A sample table declaration is listed below:

<table class="table table-striped">
  ...
</table>

Adding a border to the table

The tables reviewed this far are rendered without a border, which may conflict with existing styling guidelines in some scenarios. Happily, adding a border is done easily, by simply including a .table-bordered class to the declaration of the html table. The result is demonstrated below:

Coloring individual Rows and Cells via Contextual Classes

You can easily colorize each row or cell, by using the contextual classes in bootstrap. The same is applicable on both td and th elements. Contextual classes defined as demonstrated in the following table:

The code below demonstrates their actual use:

<!-- Used for rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- Used for cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

Adding a responsive table and binding to data

While the approaches demonstrated above are great for demonstrating the basics of bootstrap table layout and styling, it is rarely the case that one will use hard-coded values to populate the data. Using the ShieldUI Grid Widget allows both easy population with data, as well as fully responsive layout rendering, based on the container in which the grid is nested. In addition to this, the widget can be easily styled, to be in par with the color scheme used on the page. In order to initialize it on the page, all you need to do is include a div placeholder, in any Bootstrap element on the page. This may look like this:

<div class="panel-body">
     <div id="shieldui-grid1"></div>
</div>

The only thing left is to provide the control with data. Additional details on this topic can be found in this article.
The final presentation for a similar setup looks like this:

To see the complete sample, as well as a fully functional Bootstrap theme, visit this repository.

Tags: 
Bootstrap, CSS, HTML5