Bootstrap Table, Bootstrap Responsive Table, Bootstrap Table Style, Responsive Table Classes, Bootstrap Table Hover, Bootstrap Table Class

A basic Bootstrap table has a light padding and only horizontal dividers. Bootstrap provides clean and responsive layout for building tables. There are some elements supported by bootstrap.

<table>:- Use for Wrapping element for displaying data in a tabular format
<thead>:- Use for Container element for table header rows (<tr>) to label table columns.
<tbody>:- Use for Container element for table rows (<tr>) in the body of the table.
<tr>:- Use for Container element for a set of table cells (<td> or <th>) that appears on a single row.
<td>:- Use for Default table cell.
<th>:- Use for Special table cell for column (or row, depending on scope and placement) labels. Must be used within a <thead>
<caption>:- Use for Description or summary of what the table holds.

Simple Basic Table

If you are looking for simple and nice table style with just some light normal padding and horizontal dividers, you have to use .table class of any table as i am showing in following example

<table class = "table">
   <caption>Basic Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Harsh</td>
         <td>Gurgaon</td>
      </tr>
      
      <tr>
         <td>Dinesh</td>
         <td>Delhi</td>
      </tr>
   </tbody>

</table>

Other Table Classes

1. Striped Table

If you want striped Bootstrap table you have to add one simple class (.table table-striped).

Follow the Example:- 

<table class = "table table-striped">
   <caption>Striped Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Harsh</td>
         <td>Gurgaon</td>
         <td>122001</td>
      </tr>
      
      <tr>
         <td>Dinesh</td>
         <td>Gurgaon</td>
         <td>122002</td>
      </tr>
   </tbody>
   
</table>

2. Table Bordered

Another Table Style is border. if you want table having border, Use class (.table table-bordered).

Follow the Example:- 
<table class = "table table-bordered">
   <caption>Bordered Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Harsh</td>
         <td>Gurgaon</td>
         <td>122001</td>
      </tr>
      
      <tr>
         <td>Dinesh</td>
         <td>Delhi</td>
         <td>122002</td>
      </tr>
      
   </tbody>

</table>

3. Table Hover 

Another table style is table hover (.table table-hover). With the help of this table hover class a light gray background color will be added to rows while the cursor hovers over them. use the following code.

Follow The Example:- 
<table class = "table table-hover">
   <caption>Hover Table Layout</caption>
   
   <thead>
      <tr>
         <th>Name</th>
         <th>City</th>
         <th>Pincode</th>
      </tr>
   </thead>
   
   <tbody>
      <tr>
         <td>Harsh</td>
         <td>Gurgaon</td>
         <td>122001</td>
      </tr>
      
      <tr>
         <td>Dinesh</td>
         <td>Delhi</td>
         <td>122002</td>
      </tr>
     
   </tbody>
   
</table>

4. Responsive Tables

With the class (table-responsive), you will make table scroll horizontally up to small devices under 768px. When viewing on anything larger then 768px wide you will not see any difference in thes table.

Follow the Example:- 
<div class = "table-responsive">
   <table class = "table">
      
      <caption>Responsive Table Layout</caption>
      
      <thead>
         <tr>
            <th>Name</th>
            <th>city</th>
            <th>Pin Code</th>
         </tr>
      </thead>
      
      <tbody>
         <tr>
            <td>Harsh</td>
            <td>Gurgaon</td>
            <td>122001</td>
         </tr>
         
         <tr>
            <td>Dinesh</td>
            <td>Delhi</td>
            <td>122002</td>
         </tr>
         
         <tr>
            <td>Mahesh</td>
            <td>Delhi</td>
            <td>122002</td>
         </tr>         
        
      </tbody>
      
   </table>
</div>  

If you face any difficulty while using our code please comment.