Getting Started With Bootstrap Tables

bootstrap tableTables are essential for organizing sets of data using models of vertical columns (usually bearing names) and horizontal rows. Table intersections, which are called cells, are the containers for actual data. Bootstrap provides a set of pre-defined or customizable stylesheets to display tables.

New to Bootstrap? Learn it here!

Overview of the Bootstrap Framework

Bootstrap was created to inspire uniformity and consistency across internal instruments for interface development. It is a free collection of tools for creating websites and web-based applications. Using HTML and CSS-based templates, you can create forms, buttons, navigation and other front-end components including JavaScript extensions.

Its structure is modular and consists essentially of LESS stylesheets, which can be used to implement different components of Bootstrap. It contains commonly used interface elements, which includes buttons with special features such as grouping, drop-down options, navigation lists, tabs, pagination and a lot more.

Bootstrap also allows your pages to adapt to different screen sizes.

How to Use Bootstrap

To begin with, you need to download a copy of the framework. In an HTML page, you will download the Bootstrap CSS stylesheet and include a link in the HTML file. If you want to compile the CSS file from the downloaded LESS sheets, you will need a special compiler.

If you want to include JavaScript elements, include the jQuery library in the HTML document in your references.

Here’s a sample template that you can start with. It only shows the basic structure of how the HTML file will look but you can customize it according to your needs:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”utf-8″>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<title>Sample Template</title>

 

<!– Bootstrap –>

<link href=”css/bootstrap.min.css” rel=”stylesheet”>

</head>

<body>

<h1>Sample Heading!</h1>

<!– jQuery (necessary for Bootstrap’s JavaScript plugins) –>

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>

<script src=”js/bootstrap.min.js”>

</script>

</body>

</html>

Creating Bootstrap Tables

Bootstrap provides a nice and clean environment to create front-end tables. Here are some of the elements of a table that is supported by Bootstrap:

Tag                         Description

<table>                  Wrapping element for tabular format display.

<thead>                 Container for table header rows. Use <tr> to name table columns.

<tbody>                  Container for table rows <tr> in the body of the table.

<tr>                        Container for a set of table cells (<td> or <th>) in the same row.

<td>                       Default table cell.

<th>                       Special table cell for column/row. Must be used within a <thead>.

<caption>               Description or a summary regarding the subject/topic of the table.

Below is an example of a basic table style with a simple and light padding plus horizontal dividers.

Learn how to work with codes in bootstrap!

<table>
   <caption>Basic Layout Sample</caption>
   <thead>
      <tr>
         <th>Name</th>
         <th>Country</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>John</td>
         <td>France</td>
      </tr>
      <tr>         <td>Juan</td>
         <
td>Spain</td>
      </tr>
   </tbody>
</table>

To change or customize the style of your tables, you only need to add the class of the style you would like to use. For example:

<table class=”table table-bordered”> – This will allow you to get borders to surround every element in your table.

<table class=”table table-striped”> – This adds stripes on rows within the <tbody> tag.

<table class=”table table-hover”> – This style creates a dark gray background to the elements whenever the cursor hovers over them.

<table class=”table table-condensed”> – This one cuts row padding in half to condense the table.

Aside from these basic styles, there are also classes that can allow you to change the background colors of your table rows or even individual cells.

Class                Description

.active             Changes the color of a cell on hover.

.success           Indicates a successful or positive action.

.warning          Indicates a warning or a need of attention.

.danger            Denotes a potentially negative action.

Sample code:

<table>
   <caption>Contextual Layout Sample</caption>
   <thead>
      <tr>
         <th>Product</th>
         <th>Date</th>
         <th>Payment Status</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Order 1</td>
         <td>01/05/2014</td>
         <td>Pending</td>
      </tr>
      <tr>
         <td>Order 2</td>
         <td>02/11/2014</td>
         <td>Delivered</td>
      </tr>
      <tr >
         <td>Order 3</td>
         <td>03/10/2014</td>
         <td>Need to confirm</td>
      </tr>
      <tr >
         <td>Order 5</td>
         <td>04/22/2014</td>
         <td>Lost in transit</td>
      </tr>
   </tbody>
</table>

The output of the above code will show the rows to have different styles so signify their type.

Learn more about Bootstrap by taking a class at Udemy.com.

Another class is the “Responsive Table” class. This type of bootstrap table allows you to scroll the table horizontally especially when using smaller devices like tablets or mobile phones. There wouldn’t be any difference however, when using screens wider than 768 pixels.

<div>
   <table>
      <caption>Responsive Layout Sample</caption>
<thead>
      <tr>
         <th>Product</th>
         <th>Date</th>
         <th>Payment Status</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Order 1</td>
         <td>01/05/2014</td>
         <td>Pending</td>
      </tr>
      <tr>
         <td>Order 2</td>
         <td>02/11/2014</td>
         <td>Delivered</td>
      </tr>
      <tr >
         <td>Order 3</td>
         <td>03/10/2014</td>
         <td>Need to confirm</td>
      </tr>
      <tr >
         <td>Order 5</td>
         <td>04/22/2014</td>
         <td>Lost in transit</td>
      </tr>
   </tbody>
</table>
</div>

You’ll see at the bottom part that there is a scroll bar which you can use to horizontally navigate the table.

The Bootstrap framework has made it very easy and convenient for web developers to create and style their interface and tables while being able to keep their front-end consistent throughout different platforms and devices, as well as be in uniform with other websites or web-based applications who are also applying bootstrap styles.

It is compatible with all major browsers. Bootstrap is an open-source framework which is available on GitHub. This makes it open for participation by all web developers out there who would like to add their contributions and promote the use and improvement of table styles and functionalities. The potential of bootstrap tables is never-ending.