Tables

Documentation and examples for opt-in styling of tables with Falcon.

Tables on Bootstrap
Example
# First Last Handle
1 Steven Speilberg @mdo
2 Martin Scorsese @fat
3 James Cameron @twitter 
<table class="table">
  <thead class="undefined">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th class="white-space-nowrap" scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Steven</td>
      <td>Speilberg</td>
      <td class="white-space-nowrap">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Martin</td>
      <td>Scorsese</td>
      <td class="white-space-nowrap">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>James</td>
      <td>Cameron</td>
      <td class="white-space-nowrap">@twitter</td>
    </tr>
  </tbody>
</table>
Dark
# First Last Handle
1 Steven Speilberg @mdo
2 Martin Scorsese @fat
3 James Cameron @twitter 
<table class="table table-dark">
  <thead class="undefined">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th class="white-space-nowrap" scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Steven</td>
      <td>Speilberg</td>
      <td class="white-space-nowrap">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Martin</td>
      <td>Scorsese</td>
      <td class="white-space-nowrap">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>James</td>
      <td>Cameron</td>
      <td class="white-space-nowrap">@twitter</td>
    </tr>
  </tbody>
</table>
Header Dark
# First Last Handle
1 Steven Speilberg @mdo
2 Martin Scorsese @fat
3 James Cameron @twitter 
<table class="table">
  <thead class="thead-dark">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th class="white-space-nowrap" scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Steven</td>
      <td>Speilberg</td>
      <td class="white-space-nowrap">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Martin</td>
      <td>Scorsese</td>
      <td class="white-space-nowrap">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>James</td>
      <td>Cameron</td>
      <td class="white-space-nowrap">@twitter</td>
    </tr>
  </tbody>
</table>
Header Light
# First Last Handle
1 Steven Speilberg @mdo
2 Martin Scorsese @fat
3 James Cameron @twitter 
<table class="table">
  <thead class="thead-light">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th class="white-space-nowrap" scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Steven</td>
      <td>Speilberg</td>
      <td class="white-space-nowrap">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Martin</td>
      <td>Scorsese</td>
      <td class="white-space-nowrap">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>James</td>
      <td>Cameron</td>
      <td class="white-space-nowrap">@twitter</td>
    </tr>
  </tbody>
</table>
Table Striped
# First Last Handle
1 Steven Speilberg @mdo
2 Martin Scorsese @fat
3 James Cameron @twitter 
<table class="table table-striped">
  <thead class="undefined">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th class="white-space-nowrap" scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Steven</td>
      <td>Speilberg</td>
      <td class="white-space-nowrap">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Martin</td>
      <td>Scorsese</td>
      <td class="white-space-nowrap">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>James</td>
      <td>Cameron</td>
      <td class="white-space-nowrap">@twitter</td>
    </tr>
  </tbody>
</table>
Table Hover
# First Last Handle
1 Steven Speilberg @mdo
2 Martin Scorsese @fat
3 James Cameron @twitter 
<table class="table table-hover">
  <thead class="undefined">
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th class="white-space-nowrap" scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Steven</td>
      <td>Speilberg</td>
      <td class="white-space-nowrap">@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Martin</td>
      <td>Scorsese</td>
      <td class="white-space-nowrap">@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>James</td>
      <td>Cameron</td>
      <td class="white-space-nowrap">@twitter</td>
    </tr>
  </tbody>
</table>

Start building beautiful apps

Navigate

DemosPagesBlogPortfolioElements

Contact

369 ape view Avenue

Brooklyn, NY

369 ape view Avenue

Mon - Fri 9am - 5pm

+91 3929 3355

Brooklyn, NY

Subscribe

Latest Shape news, articles, and resources sent straight to your inbox every month.

We’ll never share your details. See our Privacy Policy

Made With by ThemeWagon