Tables 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.
Overview of the Bootstrap Framework
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.
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:
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<!– Bootstrap –>
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
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:
<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.
<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.
.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.
<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.
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.