Bootstrap Table


Prev Tutorial Next Tutorial

Design Table Using Bootstrap

Using bootstrap you can easily design your table style. We can create different types of Bootstrap tables by using different classes to style them.

The basic Bootstrap table has a light padding and only horizontal dividers. The .table class is used to add basic styling to a table.

Bootstrap Basic Table Example

<!DOCTYPE html>  
<html lang="en">  
  <head>  
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>  
  </head>  
  <body>  
  
<div class="container">  
  <h1>Basic Table Example</h1>  
  
<table class="table">  
  <tr><th>Id</th><th>Name</th><th>Age</th></tr>  
  <tr><td>101</td><td>Varsha</td><td>21</td></tr>  
  <tr><td>102</td><td>Gaurav</td><td>25</td></tr>  
  <tr><td>103</td><td>Harry</td><td>26</td></tr>  
  <tr><td>104</td><td>Sonam</td><td>22</td></tr>  
</table>  
  
</div>  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>  
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
  </body>  
</html>

Output


Prev Tutorial Next Tutorial

Google Advertisements

Download Projects

Google Adsense Advertisements
Free Classified Site – Bedpage

Yahoo Advertisements