Loading...
Silicon Silicon UI Kit
 Buy now

Tables

Examples for opt-in styling of tables.

Bootstrap docs

Basic example

# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93
3 Kale Thornton Developer +3 285 42 88
4 Jane Birkins Support +3 774 28 50 
<!-- Basic table -->
<div class="table-responsive">
<table class="table">
<thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Position</th>
    <th scope="col">Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
  <tr>
    <th scope="row">4</th>
    <td>Jane</td>
    <td>Birkins</td>
    <td>Support</td>
    <td>+3 774 28 50</td>
  </tr>
</tbody>
</table>
</div>

Dark table

# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93
3 Kale Thornton Developer +3 285 42 88
4 Jane Birkins Support +3 774 28 50 
<!-- Dark table -->
<div class="table-responsive">
<table class="table table-dark">
<thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Position</th>
    <th scope="col">Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
  <tr>
    <th scope="row">4</th>
    <td>Jane</td>
    <td>Birkins</td>
    <td>Support</td>
    <td>+3 774 28 50</td>
  </tr>
</tbody>
</table>
</div>

Striped rows

# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93
3 Kale Thornton Developer +3 285 42 88
# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93
3 Kale Thornton Developer +3 285 42 88 
<!-- Light table with striped rows -->
<div class="table-responsive">
<table class="table table-striped">
<thead;>
  <tr>
    <th scope="col">#</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Position</th>
    <th scope="col">Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

<!-- Dark table with striped rows -->
<div class="table-responsive">
<table class="table table-dark table-striped">
<thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Position</th>
    <th scope="col">Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

Striped columns

# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93
3 Kale Thornton Developer +3 285 42 88
# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93
3 Kale Thornton Developer +3 285 42 88 
<!-- Light table with striped columns -->
<div class="table-responsive">
<table class="table table-striped-columns">
<thead;>
  <tr>
    <th scope="col">#</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Position</th>
    <th scope="col">Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

<!-- Dark table with striped columns -->
<div class="table-responsive">
<table class="table table-dark table-striped-columns">
<thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Position</th>
    <th scope="col">Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

Bordered table

# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93
3 Kale Thornton Developer +3 285 42 88
# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93
3 Kale Thornton Developer +3 285 42 88 
<!-- Light bordered table -->
<div class="table-responsive">
<table class="table table-bordered">
<thead;>
  <tr>
    <th scope="col">#</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Position</th>
    <th scope="col">Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

<!-- Dark bordered table -->
<div class="table-responsive">
<table class="table table-dark table-bordered">
<thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Position</th>
    <th scope="col">Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

Hoverable rows

# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93
3 Kale Thornton Developer +3 285 42 88
# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93
3 Kale Thornton Developer +3 285 42 88 
<!-- Light table with hoverable rows -->
<div class="table-responsive">
<table class="table table-hover">
<thead;>
  <tr>
    <th scope="col">#</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Position</th>
    <th scope="col">Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

<!-- Dark table with hoverable rows -->
<div class="table-responsive">
<table class="table table-dark table-hover">
<thead>
  <tr>
    <th scope="col">#</th>
    <th scope="col">First Name</th>
    <th scope="col">Last Name</th>
    <th scope="col">Position</th>
    <th scope="col">Phone</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">1</th>
    <td>John</td>
    <td>Doe</td>
    <td>CEO, Founder</td>
    <td>+3 555 68 70</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>Anna</td>
    <td>Cabana</td>
    <td>Designer</td>
    <td>+3 434 65 93</td>
  </tr>
  <tr>
    <th scope="row">3</th>
    <td>Kale</td>
    <td>Thornton</td>
    <td>Developer</td>
    <td>+3 285 42 88</td>
  </tr>
</tbody>
</table>
</div>

Color borders

# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93
# First Name Last Name Position Phone
1 John Doe CEO, Founder +3 555 68 70
2 Anna Cabana Designer +3 434 65 93 
<!-- Color borders on tables -->
<table class="table table-bordered border-success">
...
</table>
<table class="table table-bordered border-danger">
...
</table>
Top