Post
Ask Question

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.


Similar Articles