Table

The use of a table is to organize a collection of data into readable rows.

General

Example

Default table

Default Table
# Family Name Given Name Handle
1 Chan Somontha @smt
2 Sok Mealdey @md
3 Cutie Jessica @neth 

 
<div class="table-responsive-lg">
  <table class="table">
    <caption>Default Table</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Family Name</th>
      <th scope="col">Given Name</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Chan</td>
      <td>Somontha</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sok</td>
      <td>Mealdey</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Cutie Jessica</td>
      <td>@neth</td>
    </tr>
    </tbody>
  </table>
</div>

Small table

Small Table
# Family Name Given Name Handle
1 Chan Somontha @smt
2 Sok Mealdey @md
3 Little Birdie @swift 

 
<div class="table-responsive-lg">
  <table class="table table-sm">
    <caption>Small Table</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Family Name</th>
      <th scope="col">Given Name</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Chan</td>
      <td>Somontha</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sok</td>
      <td>Mealdey</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Little Birdie</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

Striped body

Striped Table
# Family Name Given Name Handle
1 Chan Somontha @smt
2 Sok Mealdey @md
3 Little Birdie @swift 

 
<div class="table-responsive-lg">
  <table class="table table-striped">
    <caption>Striped Table</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Family Name</th>
      <th scope="col">Given Name</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Chan</td>
      <td>Somontha</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sok</td>
      <td>Mealdey</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Little Birdie</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

Bordered body

Bordered Table
# Family Name Given Name Handle
1 Chan Somontha @smt
2 Sok Mealdey @md
3 Little Birdie @swift 

 
<div class="table-responsive-lg">
  <table class="table table-bordered">
    <caption>Bordered Table</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Family Name</th>
      <th scope="col">Given Name</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Chan</td>
      <td>Somontha</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sok</td>
      <td>Mealdey</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Little Birdie</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

Borderless body

Borderless Table
# Family Name Given Name Handle
1 Chan Somontha @smt
2 Sok Mealdey @md
3 Little Birdie @swift 

 
<div class="table-responsive-lg">
  <table class="table table-borderless">
    <caption>Borderless Table</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Family Name</th>
      <th scope="col">Given Name</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Chan</td>
      <td>Somontha</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sok</td>
      <td>Mealdey</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Little Birdie</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

Hoverable body

Hoverable Table
# Family Name Given Name Handle
1 Chan Somontha @smt
2 Sok Mealdey @md
3 Little Birdie @swift 

 
<div class="table-responsive-lg">
  <table class="table table-hover">
    <caption>Hoverable Table</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Family Name</th>
      <th scope="col">Given Name</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Chan</td>
      <td>Somontha</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sok</td>
      <td>Mealdey</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Little Birdie</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

Dark table

Dark Table
# Family Name Given Name Handle
1 Chan Somontha @smt
2 Sok Mealdey @md
3 Little Birdie @swift 

 
<div class="table-responsive-lg">
  <table class="table table-dark">
    <caption>Dark Table</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Family Name</th>
      <th scope="col">Given Name</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Chan</td>
      <td>Somontha</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sok</td>
      <td>Mealdey</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Little Birdie</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

Responsive table

Across every breakpoint, use .table-responsive for horizontally scrolling tables. Use .table-responsive{-sm|-md|-lg|-xl|-xxl} as needed to create responsive tables up to a particular breakpoint.
Responsive Table
# Family Name Given Name Handle # Family Name Given Name Handle # Family Name Given Name Handle # Family Name Given Name Handle
1 Chan Somontha @smt 1 Chan Somontha @smt 1 Chan Somontha @smt 1 Chan Somontha @smt
2 Sok Mealdey @md 2 Sok Mealdey @md 2 Sok Mealdey @md 2 Sok Mealdey @md
3 Little Birdie @swift 3 Little Birdie @swift 3 Little Birdie @swift 3 Little Birdie @swift 

 
<div class="table-responsive">
  <table class="table">
    <caption>Responsive Table</caption>
    <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Family Name</th>
      <th scope="col">Given Name</th>
      <th scope="col">Handle</th>
      <th scope="col">#</th>
      <th scope="col">Family Name</th>
      <th scope="col">Given Name</th>
      <th scope="col">Handle</th>
      <th scope="col">#</th>
      <th scope="col">Family Name</th>
      <th scope="col">Given Name</th>
      <th scope="col">Handle</th>
      <th scope="col">#</th>
      <th scope="col">Family Name</th>
      <th scope="col">Given Name</th>
      <th scope="col">Handle</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Chan</td>
      <td>Somontha</td>
      <td>@smt</td>
      <th scope="row">1</th>
      <td>Chan</td>
      <td>Somontha</td>
      <td>@smt</td>
      <th scope="row">1</th>
      <td>Chan</td>
      <td>Somontha</td>
      <td>@smt</td>
      <th scope="row">1</th>
      <td>Chan</td>
      <td>Somontha</td>
      <td>@smt</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Sok</td>
      <td>Mealdey</td>
      <td>@md</td>
      <th scope="row">2</th>
      <td>Sok</td>
      <td>Mealdey</td>
      <td>@md</td>
      <th scope="row">2</th>
      <td>Sok</td>
      <td>Mealdey</td>
      <td>@md</td>
      <th scope="row">2</th>
      <td>Sok</td>
      <td>Mealdey</td>
      <td>@md</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td colspan="2">Little Birdie</td>
      <td>@swift</td>
      <th scope="row">3</th>
      <td colspan="2">Little Birdie</td>
      <td>@swift</td>
      <th scope="row">3</th>
      <td colspan="2">Little Birdie</td>
      <td>@swift</td>
      <th scope="row">3</th>
      <td colspan="2">Little Birdie</td>
      <td>@swift</td>
    </tr>
    </tbody>
  </table>
</div>

Usage guidelines

Table should be used:

  • When you want to show tabular information, such as statistics.
  • For displaying directories, where content of similar nature and structure are grouped together.

Table should not be used:

  • For complex data visualization, you may want to use infographics or bars and charts.
  • For dashboard displays.

Usability guidelines

Keep tables simple
Tables are useful when displaying data and complex information. Try to use minimal visual styling to surface information easily.

Consider mobile applications
As table rows can be long in nature, do consider if your content requires to be in a table.

Enable sorting
Do enable sorting where applicable as this will help users move through content within the table.

Table design tokens

$table-cell-padding-y: 1rem !default;
$table-cell-padding-x: 1rem !default;
$table-cell-padding-y-sm: .5rem !default;
$table-cell-padding-x-sm: .5rem !default;
$table-cell-vertical-align: top !default;
$table-color: $body-color !default;
$table-bg: transparent !default;
$table-accent-bg: transparent !default;
$table-th-font-weight: null !default;
$table-striped-color: $table-color !default;
$table-striped-bg-factor: .05 !default;
$table-striped-bg: rgba($black, $table-striped-bg-factor) !default;
$table-active-color: $table-color !default;
$table-active-bg-factor: .1 !default;
$table-active-bg: rgba($black, $table-active-bg-factor) !default;
$table-hover-color: $table-color !default;
$table-hover-bg-factor: .075 !default;
$table-hover-bg: rgba($black, $table-hover-bg-factor) !default;
$table-border-factor: .1 !default;
$table-border-width: $border-width !default;
$table-border-color: $gray-400 !default;
$table-striped-order: odd !default;
$table-group-separator-color: currentColor !default;
$table-caption-color: $text-muted !default;
$table-bg-scale: 100% !default;
$table-variants: ("primary": shift-color($primary, $table-bg-scale),
"secondary": shift-color($secondary, $table-bg-scale),
"success": shift-color($success, $table-bg-scale),
"info": shift-color($info, $table-bg-scale),
"warning": shift-color($warning, $table-bg-scale),
"danger": shift-color($danger, $table-bg-scale),
"light": $light,
"dark": $dark,
) !default;
Home
Previous version 1.0.3