Bootstrap Tables

<table> classes: 

Class                Description 
table Adds      basic styling (light padding and only horizontal dividers) to any <table>
table-striped   Adds alternate row style (not available in IE8)
table-bordered Adds border on all sides of the table and cells

table-hover     Enables a hover state on table rows within <tbody>
table-condensed Makes table more compact by cutting cell padding in half
table-responsive Makes the table responsive to different resolution

<table class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Ravi</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Srinivas</td>
        </tr>
    </tbody>
</table>

<tr>, <th> and <td> Contextual Classes 
Use the classes below to color table rows or cells:

Class            Description 
active           Applies the hover color to a particular row or cell
success         Indicates a successful or positive action
info               Indicates a neutral informative change or action
warning         Indicates a warning that might need attention
danger          Indicates a dangerous or potentially negative action

Responsive Tables: 

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


<div class="table-responsive">
     <table class="table">
         <caption>Responsive Table Layout</caption>
         <thead>
             <tr>
                 <th>Product</th>
                 <th>Payment Date</th>
                 <th>Status</th>
             </tr>
         </thead>
         <tbody>
             <tr>
                 <td>Product1</td>
                 <td>23/11/2013</td>
                 <td>Pending</td>
             </tr>
             <tr>
                 <td>Product2</td>
                 <td>10/11/2013</td>
                 <td> Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered
Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered Delivered
Delivered Delivered Delivered Delivered Delivered Delivered Delivered </td>
             </tr>
         </tbody>
     </table>
 </div>