Code&Play | Tables

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>

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

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>

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

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>

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

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

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>

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

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

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>

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

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

Contextual colors

#	Class	Heading	Heading
1	Active	Column content	Column content
2	Default	Column content	Column content
3	Primary	Column content	Column content
4	Default	Column content	Column content
7	Secondary	Column content	Column content
8	Default	Column content	Column content
9	Success	Column content	Column content
10	Default	Column content	Column content
11	Info	Column content	Column content
12	Default	Column content	Column content
13	Warning	Column content	Column content
14	Default	Column content	Column content
15	Danger	Column content	Column content

<!-- Table with contextual rows -->
<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Class</th>
        <th>Heading</th>
        <th>Heading</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-active">
        <th scope="row">1</th>
        <td>Active</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="table-primary">
        <th scope="row">2</th>
        <td>Primary</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="table-secondary">
        <th scope="row">4</th>
        <td>Secondary</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="table-success">
        <th scope="row">5</th>
        <td>Success</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="table-info">
        <th scope="row">6</th>
        <td>Info</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="table-warning">
        <th scope="row">7</th>
        <td>Warning</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="table-danger">
        <th scope="row">8</th>
        <td>Danger</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
    </tbody>
  </table>
</div>

// Table with contextual rows
.table-responsive
  table.table
    thead
      tr
        th #
        th Class
        th Heading
        th Heading
    tbody
      tr.table-active
        th(scope="row'") 1
        td Active
        td Column content
        td Column content
      tr.table-primary
        th(scope="row'") 2
        td Primary
        td Column content
        td Column content
      tr.table-secondary
        th(scope="row'") 4
        td Secondary
        td Column content
        td Column content
      tr.table-success
        th(scope="row'") 5
        td Success
        td Column content
        td Column content
      tr.table-info
        th(scope="row'") 6
        td Info
        td Column content
        td Column content
      tr.table-warning
        th(scope="row'") 7
        td Warning
        td Column content
        td Column content
      tr.table-danger
        th(scope="row'") 8
        td Danger
        td Column content
        td Column content

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-primary">
  ...
</table>
<table class="table table-bordered border-danger">
  ...
</table>

// Color borders on tables
table.table.table-bordered.border-primary
  ...
table.table.table-bordered.border-danger
  ...