---

---

Bootstrap provides a clean layout for building tables. Some of the table elements supported by Bootstrap are:

Different Types of tables in bootstrap

Basic Table

Basic table in the bootstrap provides light padding and horizontal dividers.

<table class="table">
   <caption>Basic Table Layout</caption>
   <thead>
      <tr>
         <th>Country</th>
         <th>Capital</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>India</td>
         <td>Delhi</td>
      </tr>
      <tr>
         <td>Bangladesh</td>
         <td>Dhaka</td>
      </tr>
      <tr>
         <td>Nepal</td>
         <td>Kathmandu</td>
      </tr>
   </tbody>
</table>

Optional Table Classes

Below are the some additional classes that we can use to style the markup.

Striped Table

By adding the .table-striped class, you will get stripes on rows within the <tbody> as seen in the following example:

<table class="table table-striped">
   <caption>Striped Table Layout</caption>
   <thead>
      <tr>
         <th>Country</th>
         <th>Capital</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>India</td>
         <td>Delhi</td>
      </tr>
      <tr>
         <td>Bangladesh</td>
         <td>Dhaka</td>
      </tr>
      <tr>
         <td>Nepal</td>
         <td>Kathmandu</td>
      </tr>
   </tbody>
</table>

Bordered Table

Using .table-bordered class, border can be shown to each element in the table as shown in the following example :

<table class="table table-bordered">
   <caption>Bordered Table Layout</caption>
   <thead>
      <tr>
         <th>Country</th>
         <th>Capital</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>India</td>
         <td>Delhi</td>
      </tr>
      <tr>
         <td>Bangladesh</td>
         <td>Dhaka</td>
      </tr>
      <tr>
         <td>Nepal</td>
         <td>Kathmandu</td>
      </tr>
   </tbody>
</table>

Hover Table

Using the .table-hover class, a light gray background will be added to rows as soon as the cursor hovers over the table cells or row, as shown in the following example:

<table class="table table-hover">
   <caption>Hover Table Layout</caption>
   <thead>
      <tr>
         <th>Country</th>
         <th>Capital</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>India</td>
         <td>Delhi</td>
      </tr>
      <tr>
         <td>Bangladesh</td>
         <td>Dhaka</td>
      </tr>
      <tr>
         <td>Nepal</td>
         <td>Kathmandu</td>
      </tr>
   </tbody>
</table>

Condensed Table

Using the .table-condensed class, row padding is cut in half to condense the table.

<table class="table table-condensed">
   <caption>Condensed Table Layout</caption>
   <thead>
      <tr>
         <th>Country</th>
         <th>Capital</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>India</td>
         <td>Delhi</td>
      </tr>
      <tr>
         <td>Bangladesh</td>
         <td>Dhaka</td>
      </tr>
      <tr>
         <td>Nepal</td>
         <td>Kathmandu</td>
      </tr>
   </tbody>
</table>

Contextual classes

The Contextual classes allow us to change the background color of your table rows or individual cells.

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

These classes can be applied to <tr>, <td> or <th>.

<table class="table">
   <caption>Contextual Table Layout</caption>
   <thead>
      <tr>
         <th>Product</th>
         <th>Payment Date</th>
         <th>Status</th>
      </tr>
   </thead>
   <tbody>
      <tr class="active">
         <td>Product1</td>
         <td>23/11/2013</td>
         <td>Pending</td>
      </tr>
      <tr class="success">
         <td>Product2</td>
         <td>10/11/2013</td>
         <td>Delivered</td>
      </tr>
      <tr  class="warning">
         <td>Product3</td>
         <td>20/10/2013</td>
         <td>In Call to confirm</td>
      </tr>
      <tr  class="danger">
         <td>Product4</td>
         <td>20/10/2013</td>
         <td>Declined</td>
      </tr>
   </tbody>
</table>

Responsive tables

By wrapping any .table in .table-responsive class, you will make the scrollbar enabled to scroll the screen horizontally in the small devices (under 768px).

<div class="table-responsive">
<table class="table">
   <caption>Responsive Table Layout</caption>
   <thead>
      <tr>
         <th>Country</th>
         <th>Capital</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>India</td>
         <td>Delhi</td>
      </tr>
      <tr>
         <td>Bangladesh</td>
         <td>Dhaka</td>
      </tr>
      <tr>
         <td>Nepal</td>
         <td>Kathmandu</td>
      </tr>
   </tbody>
</table>
</div>

Higher resolution screens will not show scroll bar.

---

---