Overview


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

Table striped (zebra)


<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>