Bootstrap

Learn About Bootstrap Tables

What is Table?

  • The HTML tables are used to present data in a grid style, such as row and columns
  • Basically we want to create a table which means we must use <table>tag

Bootstrap Tables

  • Simple padding
  • Horizontal line

Bootstrap Tables class

  • Table
  • Table-striped
  • Table-bordered
  • Table-hover
  • Table-condensed

Contextual classes

  • Active - applies the hover color to the table row or table cell
  • Success - successful or positive action
  • Info - natural action or informative changes
  • Warning - that might need attention
  • Danger - dangerous or negative action

Bootstrap has a clean layout for building tables; some of the table elements are supported by bootstrap. Those classes are given below,

TAGDescription
<table>Wrapping element for displaying in a tabular format
<thead>Container element for table header rows<tr> to lable table columns
<tbody>Container element for table rows <tr> in the body of table
<tr>Container element for a set of table cell <td> or <th> that appears on a single row
<td>Default table cell
<th>Special table cell for column tables must be used with in a<thead>
<caption>Description of summery of what the table holds

Creating a Simple Table with Bootstrap

  • The table with basic styling has horizontal divided mode
  • The small cell padding 8px by default
  • <table> element are use
Simple Program for Table
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-primary">  
  13.           Bootstrap Tables  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row">  
  17.             <table class="table">  
  18.                 <thead>  
  19.                     <tr>  
  20.                         <th>Name</th>  
  21.                         <th>Age</th>  
  22.                         <th>City</th>  
  23.                         <th>Contact</th>  
  24.                     </tr>  
  25.                 </thead>  
  26.                 <tbody>  
  27.                     <tr>  
  28.                         <td>Diamond Antony</td>  
  29.                         <td>23</td>  
  30.                         <td>Salem</td>  
  31.                         <td>1234567890</td>  
  32.                     </tr>  
  33.                     <tr>  
  34.                         <td>Senthil kumar</td>  
  35.                         <td>22</td>  
  36.                         <td>Bangalore</td>  
  37.                         <td>9087654321</td>  
  38.                     </tr>  
  39.                     <tr>  
  40.                         <td>priyanga</td>  
  41.                         <td>21</td>  
  42.                         <td>Chennai</td>  
  43.                         <td>8907654321</td>  
  44.                     </tr>  
  45.                 </tbody>  
  46.             </table>  
  47.         </div>  
  48.      </div>  
  49.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  50.     <script type="text/css" src="js/jquery"></script>   
  51. </body>  
  52. </html>  
Outpu
Bootstrap 

That is the output for basic Bootstrap table

Creating a Table-striped with Bootstrap

  • In this Table-striped class is called as a zebra-striped
  • Using .table-striped class
  • In this table-striped class generate the black and white color
  • The striped on rows with in the <tbody>

Sample program for table-striped

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-primary">  
  13.           Bootstrap Tables  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row">  
  17.             <table class="table table-striped">  
  18.                 <thead>  
  19.                     <tr>  
  20.                         <th>Name</th>  
  21.                         <th>Age</th>  
  22.                         <th>City</th>  
  23.                         <th>Contact</th>  
  24.                     </tr>  
  25.                 </thead>  
  26.                 <tbody>  
  27.                     <tr>  
  28.                         <td>Diamond Antony</td>  
  29.                         <td>23</td>  
  30.                         <td>Salem</td>  
  31.                         <td>1234567890</td>  
  32.                     </tr>  
  33.                     <tr>  
  34.                         <td>Senthil kumar</td>  
  35.                         <td>22</td>  
  36.                         <td>Bangalore</td>  
  37.                         <td>9087654321</td>  
  38.                     </tr>  
  39.                     <tr>  
  40.                         <td>priyanga</td>  
  41.                         <td>21</td>  
  42.                         <td>Chennai</td>  
  43.                         <td>8907654321</td>  
  44.                     </tr>  
  45.                 </tbody>  
  46.             </table>  
  47.         </div>  
  48.       
  49.      </div>  
  50.   
  51.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  52.     <script type="text/css" src="js/jquery"></script>   
  53. </body>  
  54. </html>  
Output
Bootstrap


Creating a table-bordered with Bootstrap

  • All table contents come with box or border
  • All tables and cells are covered to the borders
  • .table –bordered class is using
  • The rounded corners are around the entire table
Sample program for table-bordered
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-primary">  
  13.           Bootstrap Tables  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row">  
  17.             <table class="table table-bordered">  
  18.                 <thead>  
  19.                     <tr>  
  20.                         <th>Name</th>  
  21.                         <th>Age</th>  
  22.                         <th>City</th>  
  23.                         <th>Contact</th>  
  24.                     </tr>  
  25.                 </thead>  
  26.                 <tbody>  
  27.                     <tr>  
  28.                         <td>Diamond Antony</td>  
  29.                         <td>23</td>  
  30.                         <td>Salem</td>  
  31.                         <td>1234567890</td>  
  32.                     </tr>  
  33.                     <tr>  
  34.                         <td>Senthil kumar</td>  
  35.                         <td>22</td>  
  36.                         <td>Bangalore</td>  
  37.                         <td>9087654321</td>  
  38.                     </tr>  
  39.                     <tr>  
  40.                         <td>priyanga</td>  
  41.                         <td>21</td>  
  42.                         <td>Chennai</td>  
  43.                         <td>8907654321</td>  
  44.                     </tr>  
  45.                 </tbody>  
  46.             </table>  
  47.         </div>  
  48.       
  49.      </div>  
  50.   
  51.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  52.     <script type="text/css" src="js/jquery"></script>   
  53. </body>  
  54. </html>  
Output
Bootstrap

Creating a Table-hover with Bootstrap
  • Gray color background is generated on hover effect
  • .table-hover class is using
  • The cursor is hovering over the table row when the hover effect is generated

Sample program for table-hover

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-primary">  
  13.           Bootstrap Tables  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row">  
  17.             <table class="table table-hover">  
  18.                 <thead>  
  19.                     <tr>  
  20.                         <th>Name</th>  
  21.                         <th>Age</th>  
  22.                         <th>City</th>  
  23.                         <th>Contact</th>  
  24.                     </tr>  
  25.                 </thead>  
  26.                 <tbody>  
  27.                     <tr>  
  28.                         <td>Diamond Antony</td>  
  29.                         <td>23</td>  
  30.                         <td>Salem</td>  
  31.                         <td>1234567890</td>  
  32.                     </tr>  
  33.                     <tr>  
  34.                         <td>Senthil kumar</td>  
  35.                         <td>22</td>  
  36.                         <td>Bangalore</td>  
  37.                         <td>9087654321</td>  
  38.                     </tr>  
  39.                     <tr>  
  40.                         <td>priyanga</td>  
  41.                         <td>21</td>  
  42.                         <td>Chennai</td>  
  43.                         <td>8907654321</td>  
  44.                     </tr>  
  45.                 </tbody>  
  46.             </table>  
  47.         </div>  
  48.       
  49.      </div>  
  50.   
  51.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  52.     <script type="text/css" src="js/jquery"></script>   
  53. </body>  
  54. </html>  
Output
Bootstrap

Creating a table-condensed with Bootstrap
  • Using this class makes table more compact by cutting cell padding in half
  • Large number of columns are in your table means that class will be of help
  • .table-condensed class is used

Sample program for table-hover

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-primary">  
  13.           Bootstrap Tables  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row">  
  17.             <table class="table table-condensed">  
  18.                 <thead>  
  19.                     <tr>  
  20.                         <th>Name</th>  
  21.                         <th>Age</th>  
  22.                         <th>City</th>  
  23.                         <th>Contact</th>  
  24.                     </tr>  
  25.                 </thead>  
  26.                 <tbody>  
  27.                     <tr>  
  28.                         <td>Diamond Antony</td>  
  29.                         <td>23</td>  
  30.                         <td>Salem</td>  
  31.                         <td>1234567890</td>  
  32.                     </tr>  
  33.                     <tr>  
  34.                         <td>Senthil kumar</td>  
  35.                         <td>22</td>  
  36.                         <td>Bangalore</td>  
  37.                         <td>9087654321</td>  
  38.                     </tr>  
  39.                     <tr>  
  40.                         <td>priyanga</td>  
  41.                         <td>21</td>  
  42.                         <td>Chennai</td>  
  43.                         <td>8907654321</td>  
  44.                     </tr>  
  45.                 </tbody>  
  46.             </table>  
  47.         </div>  
  48.       
  49.      </div>  
  50.   
  51.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  52.     <script type="text/css" src="js/jquery"></script>   
  53. </body>  
  54. </html>  

Output

Bootstrap

Contextual classes

  • Contextual classes are used in table row <tr> or table cells<td>
  • Each color indicates some reaction
  • The colors are used to identify the particular locations

Using Contextual classes

  • .active
  • .success
  • .info
  • .warning
  • .danger

Sample program for contextual classes

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-primary">  
  13.           Bootstrap Tables  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row">  
  17.             <table class="table">  
  18.                 <thead>  
  19.                     <tr class="active">  
  20.                         <th>Name</th>  
  21.                         <th>Age</th>  
  22.                         <th>City</th>  
  23.                         <th>Contact</th>  
  24.                     </tr>  
  25.                 </thead>  
  26.                 <tbody>  
  27.                     <tr class="success">  
  28.                         <td>Diamond Antony</td>  
  29.                         <td>23</td>  
  30.                         <td>Salem</td>  
  31.                         <td>1234567890</td>  
  32.                     </tr>  
  33.                     <tr class="info">  
  34.                         <td>Senthil kumar</td>  
  35.                         <td>22</td>  
  36.                         <td>Bangalore</td>  
  37.                         <td>9087654321</td>  
  38.                     </tr>  
  39.                     <tr class="warning">  
  40.                         <td>priyanga</td>  
  41.                         <td>21</td>  
  42.                         <td>Chennai</td>  
  43.                         <td>8907654321</td>  
  44.                     </tr>  
  45.                     <tr class="danger">  
  46.                         <td>partheeban</td>  
  47.                         <td>21</td>  
  48.                         <td>Dharmaburi</td>  
  49.                         <td>9543216780</td>  
  50.                     </tr>  
  51.                 </tbody>  
  52.             </table>  
  53.         </div>  
  54.       
  55.      </div>  
  56.   
  57.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  58.     <script type="text/css" src="js/jquery"></script>   
  59. </body>  
  60. </html>  
Output
Bootstrap
 
Responsive Table

  • The table has a horizontal scroll on small devices under 768px
  • When viewing on anything larger than 768px wide you will not see any difference in these tables
  • .table-responsive class is used 

Sample program for responsive table

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.         <meta charset="utf-8">  
  5.         <meta name="viewport" content="width=device-width, initial scale=1">  
  6.         <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  7.     </head>  
  8. <body>  
  9.           
  10.     <div class="container">  
  11.         <div class="row">  
  12.           <h1 class="text-center page-header text-primary">  
  13.           Bootstrap Tables  
  14.           </h1>  
  15.             </div>  
  16.           <div class="row">  
  17.           <div class="table-responsive">  
  18. <caption>responsive table layout</caption>  
  19.             <table class="table ">  
  20.                 <thead>  
  21.                     <tr class="active">  
  22.                         <th>Name</th>  
  23.                         <th>Age</th>  
  24.                         <th>City</th>  
  25.                         <th>Contact</th>  
  26.                     </tr>  
  27.                 </thead>  
  28.                 <tbody>  
  29.                     <tr class="success">  
  30.                         <td>Diamond Antony</td>  
  31.                         <td>23</td>  
  32.                         <td>Salem</td>  
  33.                         <td>1234567890</td>  
  34.                     </tr>  
  35.                     <tr class="info">  
  36.                         <td>Senthil kumar</td>  
  37.                         <td>22</td>  
  38.                         <td>Bangalore</td>  
  39.                         <td>9087654321</td>  
  40.                     </tr>  
  41.                     <tr class="warning">  
  42.                         <td>priyanga</td>  
  43.                         <td>21</td>  
  44.                         <td>Chennai</td>  
  45.                         <td>8907654321</td>  
  46.                     </tr>  
  47.                     <tr class="danger">  
  48.                         <td>partheeban</td>  
  49.                         <td>21</td>  
  50.                         <td>Dharmaburi</td>  
  51.                         <td>9543216780</td>  
  52.                     </tr>  
  53.                 </tbody>  
  54.             </table>  
  55.         </div>  
  56.       
  57.      </div>  
  58.   
  59.     <script type="text/javascript" src="js/bootstrap.min.js"></script>  
  60.     <script type="text/css" src="js/jquery"></script>   
  61. </body>  
  62. </html>  
Output
 Bootstrap

This output has the horizontal scroll bar that is the output for responsive table

Conclusion

I hope now you can understand how to use and create the Bootstrap Tables. In the future we can learn about the Bootstrap techniques step by step. Stay tuned.

Up Next
    Ebook Download
    View all
    CSS by AI
    Read by 3 people
    Download Now!
    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