Bootstrap Tables

What is Table?

The HTML tables are used to represent data in row and columns. But in Bootstrap you can eaisly create table with different styles.

Example of Simple Table in Bootstrap

<table class="table">
  <thead>
    <tr>
      <th>Row</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Carter</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Peter</td>
      <td>Parker</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John</td>
      <td>Rambo</td>
    </tr>
  </tbody>
</table>

Output of Simple Table in Bootstrap

Example of Tables with Striped Rows

<table class="table table-striped">
  <thead>
    <tr>
      <th>Row</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Carter</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Peter</td>
      <td>Parker</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John</td>
      <td>Rambo</td>
    </tr>
  </tbody>
</table>

Output of Tables with Striped Rows

Example of Table with Borders on All Sides

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Row</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Carter</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Peter</td>
      <td>Parker</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John</td>
      <td>Rambo</td>
    </tr>
  </tbody>
</table>

Output of Table with Borders on All Sides

Example of Enable Hover on Table Rows

<table class="table table-hover">
  <thead>
    <tr>
      <th>Row</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Carter</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Peter</td>
      <td>Parker</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John</td>
      <td>Rambo</td>
    </tr>
  </tbody>
</table>

Output of Enable Hover on Table Rows

Example of Compact Table

<table class="table table-condensed">
  <thead>
    <tr>
      <th>Row</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Carter</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Peter</td>
      <td>Parker</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John</td>
      <td>Rambo</td>
    </tr>
  </tbody>
</table>

Output of Compact Table

Example of Optional Emphasis Classes for Table Rows

<table class="table">
  <thead>
    <tr>
      <th>Row</th>
      <th>Bill</th>
      <th>Payment Date</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>1</td>
      <td>Credit Card</td>
      <td>04/07/2014</td>
    </tr>
    <tr class="success">
      <td>2</td>
      <td>Water</td>
      <td>01/07/2014</td>
    </tr>
    <tr class="info">
      <td>3</td>
      <td>Internet</td>
      <td>05/07/2014</td>
    </tr>
    <tr class="warning">
      <td>4</td>
      <td>Electricity</td>
      <td>03/07/2014</td>
    </tr>
    <tr class="danger">
      <td>5</td>
      <td>Telephone</td>
      <td>06/07/2014</td>
    </tr>
  </tbody>
</table>

Output of Optional Emphasis Classes for Table Rows

Example of Responsive Tables

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Row</th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Carter</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Peter</td>
      <td>Parker</td>
    </tr>
    <tr>
      <td>3</td>
      <td>John</td>
      <td>Rambo</td>
    </tr>
  </tbody>
</table>

Output of Responsive Tables