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

Buy 3 Year Old Domain, Tutorialday.com, SeosmoTools.com @$200

Buy This Ad Space @$50 per Month, Ad Size 300X250 Contact on: hitesh.xc@gmail.com WhatsApp no. 8882538826

Yahoo Advertisements