Bootstrap

Introduction To Bootstrap Tables

Table

Table is a structure that contains a set of rows and columns, used to store or show data.

1

Bootstrap Table Elements

Some of the table elements supported by bootstrap are given below.
  • <table>
    This is used for wrapping elements for displaying data in a tabular format.
  • <thead>
    This tag is a container element for table header rows to label table columns.
  • <tbody>
    Container element for table rows in the body of the table.
  • <tr>
    Container element for a set of table cells that appear on a single row.
  • <td>
    Default table cell.
  • <th>
    Special table cell for column or row depending on scope and placement labels. It must be used within a <thead>.
  • <caption>
    Description of what the table holds.
Now, let's move ahead and take a look at different types of tables that can be used in bootstrap.

Bootstrap Basic Table

In bootstrap, basic tables can be defined by using .table class. This table has only horizontal dividers.

Example
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  9.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12. <div class="container">  
  13.   <h2>Basic Table in Bootstrap</h2>  
  14.   <p>The .table class adds basic styling.</p>              
  15.   <table class="table">  
  16.     <thead>  
  17.       <tr>  
  18.         <th>Firstname</th>  
  19.         <th>Lastname</th>  
  20.         <th>Email</th>  
  21.       </tr>  
  22.     </thead>  
  23.     <tbody>  
  24.       <tr>  
  25.         <td>Ankur</td>  
  26.         <td>Soni</td>  
  27.         <td>[email protected]</td>  
  28.       </tr>  
  29.       <tr>  
  30.         <td>Prashant</td>  
  31.         <td>Sharma</td>  
  32.         <td>[email protected]</td>  
  33.       </tr>  
  34.       <tr>  
  35.         <td>Kartik</td>  
  36.         <td>Kumar</td>  
  37.         <td>[email protected]</td>  
  38.       </tr>  
  39.     </tbody>  
  40.   </table>  
  41. </div>  
  42. </body>  
  43. </html>  
Output

3

Table with Striped Row

In bootstrap, we can use .table-striped class to add stripes to all rows in a particular table. Let us see with a basic example of striped row.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  9.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.   
  13. <div class="container">  
  14.   <h2>Striped Rows</h2>  
  15.   <p>The .table-striped class adds zebra-stripes to all rows in a table:</p>              
  16.   <table class="table table-striped">  
  17.     <thead>  
  18.       <tr>  
  19.         <th>Firstname</th>  
  20.         <th>Lastname</th>  
  21.         <th>Email</th>  
  22.       </tr>  
  23.     </thead>  
  24.     <tbody>  
  25.       <tr>  
  26.         <td>Ankur</td>  
  27.         <td>soni</td>  
  28.         <td>[email protected]</td>  
  29.       </tr>  
  30.       <tr>  
  31.         <td>parshant</td>  
  32.         <td>Sharma</td>  
  33.         <td>[email protected]</td>  
  34.       </tr>  
  35.       <tr>  
  36.         <td>Kartik</td>  
  37.         <td>Kumar</td>  
  38.         <td>[email protected]</td>  
  39.       </tr>  
  40.     </tbody>  
  41.   </table>  
  42. </div>  
  43.   
  44. </body>  
  45. </html>  
Output

5

Bordered Table

In bootstrap, we can use .table-bordered class which will give borders to all sides of the table. Below is the example of a bordered table.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  9.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.   
  13. <div class="container">  
  14.   <h2>Bordered Table</h2>             
  15.   <table class="table table-bordered">  
  16.     <thead>  
  17.       <tr>  
  18.         <th>Firstname</th>  
  19.         <th>Lastname</th>  
  20.         <th>Email</th>  
  21.       </tr>  
  22.     </thead>  
  23.     <tbody>  
  24.       <tr>  
  25.         <td>Dilip</td>  
  26.         <td>vats</td>  
  27.         <td>[email protected]</td>  
  28.       </tr>  
  29.       <tr>  
  30.         <td>Dinesh</td>  
  31.         <td>Bhati</td>  
  32.         <td>[email protected]</td>  
  33.       </tr>  
  34.       <tr>  
  35.         <td>Amit</td>  
  36.         <td>Kumar</td>  
  37.         <td>[email protected]</td>  
  38.       </tr>  
  39.     </tbody>  
  40.   </table>  
  41. </div>  
  42.   
  43. </body>  
  44. </html>  
Output

7

Condensed Table

In bootstrap, we can make a table more compact by cutting the padding into half using .table-condensed class.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  9.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.   
  13. <div class="container">  
  14.   <h2>Condensed Table Example</h2>  
  15.               
  16.   <table class="table table-condensed">  
  17.     <thead>  
  18.       <tr>  
  19.         <th>Firstname</th>  
  20.         <th>Lastname</th>  
  21.         <th>Email</th>  
  22.       </tr>  
  23.     </thead>  
  24.     <tbody>  
  25.       <tr>  
  26.         <td>Joe</td>  
  27.         <td>Root</td>  
  28.         <td>[email protected]</td>  
  29.       </tr>  
  30.       <tr>  
  31.         <td>David</td>  
  32.         <td>Warner</td>  
  33.         <td>[email protected]</td>  
  34.       </tr>  
  35.       <tr>  
  36.         <td>Kane</td>  
  37.         <td>New</td>  
  38.         <td>[email protected]</td>  
  39.       </tr>  
  40.     </tbody>  
  41.   </table>  
  42. </div>  
  43.   
  44. </body>  
  45. </html>  
Output

9

Hover Rows in Table

We can also add the hover effect in a table by using .table-hover. This gives a hover effect to all rows by changing background color to gray.
 
Example
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <title>Bootstrap Example</title>  
  5.   <meta charset="utf-8">  
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  9.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  10. </head>  
  11. <body>  
  12.   
  13. <div class="container">  
  14.  <h2>Hover Rows</h2>  
  15.   <p>The .table-hover class gives a hover effect on table rows:</p>              
  16.   <table class="table table-hover">  
  17.     <thead>  
  18.       <tr>  
  19.         <th>Firstname</th>  
  20.         <th>Lastname</th>  
  21.         <th>Email</th>  
  22.       </tr>  
  23.     </thead>  
  24.     <tbody>  
  25.       <tr>  
  26.         <td>Joe</td>  
  27.         <td>Root</td>  
  28.         <td>[email protected]</td>  
  29.       </tr>  
  30.       <tr>  
  31.         <td>David</td>  
  32.         <td>Warner</td>  
  33.         <td>[email protected]</td>  
  34.       </tr>  
  35.       <tr>  
  36.         <td>Kane</td>  
  37.         <td>New</td>  
  38.         <td>[email protected]</td>  
  39.       </tr>  
  40.     </tbody>  
  41.   </table>  
  42. </div>  
  43.   
  44. </body>  
  45. </html>  
Output

11

Responsive Tables

In bootstrap, we can create responsive tables by using .table-responsive. Responsive table scrolls down when open in a small screen but there will be no effect if we open it on a medium or big screen (more than 768 pixels).
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">  
  5.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  
  6.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  
  7.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10. <div class="container">  
  11.   <h2>Table</h2>  
  12.   <p>The .table-responsive class creates a responsive table.</p>                                                                                       
  13.   <div class="table-responsive">            
  14.   <table class="table">  
  15.     <thead>  
  16.       <tr>  
  17.         <th>#</th>  
  18.         <th>Firstname</th>  
  19.         <th>Lastname</th>  
  20.         <th>Gender</th>  
  21.         <th>Age</th>  
  22.         <th>Country</th>  
  23.       </tr>  
  24.     </thead>  
  25.     <tbody>  
  26.       <tr>  
  27.         <td>1</td>  
  28.         <td>Andrew</td>  
  29.         <td>Clark</td>  
  30.         <td>Male</td>  
  31.         <td>30</td>  
  32.         <td>USA</td>  
  33.       </tr>  
  34.     </tbody>  
  35.   </table>  
  36.   </div>  
  37. </div>  
  38. </body>  
  39. </html>  
Output

13

Creating Tables using Contextual Class

In bootstrap, we can make tables by using contextual classes. It will color the table rows and table cell. Following classes can be used.
  • .active
  • .success
  • .warning
  • .danger
  • .info
Example

Let us take a look at the above contextual classes, used in a single example.

Output

16

In this article, we learned about different elements and different types of tables in Bootstrap. I hope you have enjoyed learning it.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs