Tables

The standard format contains the minimum spacing and only horizontal lines between the rows.

Overview

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat 
<table>
    ...
</table>

Table-striped

<table class="table-striped">

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Mark Otto @mdo
4 Jacob Thornton @fat 
<table class="table-striped">
    ...
</table>

With borders

<table class="table-bordered">

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Mark Otto @mdo
4 Jacob Thornton @fat 
<table class="table-bordered">
    ...
</table>

Table Hover

<table class="table-hover">

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Mark Otto @mdo
4 Jacob Thornton @fat 
<table class="table-hover">
  ...
</table>

Table outline

<table class="table-outline">

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Mark Otto @mdo
4 Jacob Thornton @fat 
<table class="table-outline">
  ...
</table>

Rows highlighting in the table

<tr class="warning error info OR success">

Use classes for more interactivity of your application and / or to respond to user's actions

1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Mark Otto @mdo
4 Jacob Thornton @fat 
<table>
    <tr class="warning">
        ...
    </tr>
    <tr class="error">
        ...
    </tr>
    <tr class="info">
        ...
    </tr>
    <tr class="success">
        ...
    </tr>
</table>

Color highlighting in <table class="table-hover">

1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Mark Otto @mdo
4 Jacob Thornton @fat 
<table class="table-hover">
      <tr class="warning">
        ...
      </tr>
      <tr class="error">
        ...
      </tr>
      <tr class="info">
        ...
      </tr>
      <tr class="success">
        ...
      </tr>
</table>

Responsive table

<table class="responsive">

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat 
<table class="responsive">
    ...
</table>

Share with your friends

Google+