Loading...
Around UI Kit
Buy now

Menu

Content

Components

Utilities

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

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>

Contextual colors

# Class Heading Heading
1 Primary Column content Column content
2 Secondary Column content Column content
3 Success Column content Column content
4 Info Column content Column content
5 Warning Column content Column content
6 Danger Column content Column content 
<!-- Table with contextual rows -->
<div class="table-responsive">
  <table class="table" style="--ar-table-bg: transparent;">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">Class</th>
        <th scope="col">Heading</th>
        <th scope="col">Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-primary bg-opacity-10">
        <th scope="row">1</th>
        <td>Primary</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="bg-secondary">
        <th scope="row">2</th>
        <td>Secondary</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="bg-success bg-opacity-10">
        <th scope="row">3</th>
        <td>Success</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="bg-info bg-opacity-10">
        <th scope="row">4</th>
        <td>Info</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="bg-warning bg-opacity-10">
        <th scope="row">5</th>
        <td>Warning</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="bg-danger bg-opacity-10">
        <th scope="row">6</th>
        <td>Danger</td>
        <td>Column content</td>
        <td>Column content</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-info">
  ...
</table>
<table class="table table-bordered border-danger">
  ...
</table>