Before the advent of div tags, tables were the most commonly used elements for structuring your webpage. Now, when divs have been long in use, tables are not considered that much important. However, there still are many uses of tables, particularly when you want to style content in tabular form. Bootstrap tables come with a built-in style and format which can easily be tweaked via bootstrap classes. Let’s have a look at a very simple example of bootstrap tables.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>Company</th>
<th>Car</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>6.7 Million</td>
</tr>
<tr>
<td>Honda</td>
<td>Accord</td>
<td>4.5 Million</td>
</tr>
<tr>
<td>BMW</td>
<td>7 Series</td>
<td>9 Million</td>
</tr>
</tbody>
</table>
</body>
</html>
To use bootstrap tables in your application, simply use “table” class inside the table element. This styles the table as per default bootstrap style where each row is separated by a horizontal line.
You can also add fancy look to the table by changing the color of alternate table rows. This is done by adding “table-striped” class to the table element. Take a look at the following example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<thead>
<tr>
<th>Company</th>
<th>Car</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>6.7 Million</td>
</tr>
<tr>
<td>Honda</td>
<td>Accord</td>
<td>4.5 Million</td>
</tr>
<tr>
<td>BMW</td>
<td>7 Series</td>
<td>9 Million</td>
</tr>
</tbody>
</table>
</body>
</html>
If you open the above page in browser you should see that alternate rows have a light blue background. It is important to note here that when you apply additional styles to table you must also add the “table” class as well. For instance in the above code, two classes i.e. “table table-stripped” are styling the table. If you leave the “table” class here, you will see that default table properties are removed.
By default, table rows are separated via horizontal lines. There is no vertical border among columns. You can add border around the table and each and every cell using the “table-bordered” class. Similarly, you can also add hover affect on table rows which highlight the row when you hover the mouse over it. take a look at the following example.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Company</th>
<th>Car</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Toyota</td>
<td>Camry</td>
<td>6.7 Million</td>
</tr>
<tr>
<td>Honda</td>
<td>Accord</td>
<td>4.5 Million</td>
</tr>
<tr>
<td>BMW</td>
<td>7 Series</td>
<td>9 Million</td>
</tr>
</tbody>
</table>
</body>
</html>
If you open the above page in the browser, you will see a table with border around all the cells. When you hover your mouse over any row, that row will be highlighted.