Bootstrap Tables

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>

Download the code
Try the code

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.

Stripped Tables

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>

Download the code
Try the code

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.

Table border and Table Hover

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>

Download the code
Try the code

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.

<<< Bootstrap ImagesBootstrap Jumbotron >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .