Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# 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>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th>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>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th>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>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th>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>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th>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>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th>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>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th>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>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th>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>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th>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