Tables

Basic table

# First Name Last Name Username
1 John Doe @jdo
2 Walter Smith @wsm 
<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>@jdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Walter</td>
      <td>Smith</td>
      <td>@wsm</td>
    </tr>
  </tbody>
</table>

Striped table

# First Name Last Name Username
1 John Doe @jdo
2 Walter Smith @wsm
3 Edmure Fish @tul 
<table class="table table-striped">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>@jdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Walter</td>
      <td>Smith</td>
      <td>@wsm</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Edmure</td>
      <td>Fish</td>
      <td>@tul</td>
    </tr>
  </tbody>
</table>

Bordered table

# First Name Last Name Username
1 John Doe @jdo
2 Walter Smith @wsm 
<table class="table table-bordered">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>@jdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Walter</td>
      <td>Smith</td>
      <td>@wsm</td>
    </tr>
  </tbody>
</table>

Hover table

# First Name Last Name Username
1 John Doe @jdo
2 Walter Smith @wsm 
<table class="table table-hover">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>@jdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Walter</td>
      <td>Smith</td>
      <td>@wsm</td>
    </tr>
  </tbody>
</table>

Condensed table

# First Name Last Name Username
1 John Doe @jdo
2 Walter Smith @wsm 
<table class="table table-condensed">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>John</td>
      <td>Doe</td>
      <td>@jdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Walter</td>
      <td>Smith</td>
      <td>@wsm</td>
    </tr>
  </tbody>
</table>

Highlight table

# Column heading Column heading Column heading
1 Column content Column content Column content
2 Column content Column content Column content
3 Column content Column content Column content
4 Column content Column content Column content
5 Column content Column content Column content
6 Column content Column content Column content
7 Column content Column content Column content
8 Column content Column content Column content
9 Column content Column content Column content 
<table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>Column heading</th>
          <th>Column heading</th>
          <th>Column heading</th>
        </tr>
      </thead>
      <tbody>
        <tr class="active">
          <td>1</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="success">
          <td>3</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="info">
          <td>5</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr>
          <td>6</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="warning">
          <td>7</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr>
          <td>8</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="danger">
          <td>9</td>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
      </tbody>
    </table>