Tables

HTML
Pug

<!-- Table Basic Example -->
<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>

//- Table Basic Example
.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

HTML
Pug

<!-- Table Invert Colors -->
<div class="table-responsive table-dark">
  <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>

//- Table Invert Colors
.table-responsive.table-dark
  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

HTML
Pug

<!-- Table Invert Head -->
<div class="table-responsive">
  <table class="table">
    <thead class="thead-dark">
      <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>

<!-- Table Default Head -->
<div class="table-responsive">
  <table class="table">
    <thead class="thead-light">
      <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>

//- Table Invert Head
.table-responsive
  table.table
    thead.thead-dark
      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

//- Table Default Head
.table-responsive
  table.table
    thead.thead-light
      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

HTML
Pug

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

<!-- Table Inverse 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>

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

//- Table Inverse 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

HTML
Pug

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

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

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

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

HTML
Pug

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

<!-- Inverse Table 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>

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

//- Inverse Table 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

HTML
Pug

<!-- Table Contextual Colors -->
<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">3</th>
        <td>Secondary</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="table-accent">
        <th scope="row">4</th>
        <td>Accent</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>

<!-- Inverse Table Contextual Colors -->
<div class="table-responsive">
  <table class="table table-dark">
    <thead>
      <tr>
        <th>#</th>
        <th>Column heading</th>
        <th>Column heading</th>
        <th>Column heading</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-primary">
        <th scope="row">1</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="bg-accent">
        <th scope="row">2</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="bg-gradient">
        <th scope="row">3</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="bg-success">
        <th scope="row">4</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="bg-info">
        <th scope="row">5</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="bg-warning">
        <th scope="row">6</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
      <tr class="bg-danger">
        <th scope="row">8</th>
        <td>Column content</td>
        <td>Column content</td>
        <td>Column content</td>
      </tr>
    </tbody>
  </table>
</div>

//- Table Contextual Colors
.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") 3
        td Secondary
        td Column content
        td Column content
      tr.table-accent
        th(scope="row") 4
        td Accent
        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

//- Inverse Table Contextual Colors
.table-responsive
  table.table.table-dark
    thead
      tr
        th #
        th Column heading
        th Column heading
        th Column heading
    tbody
      tr.bg-primary
        th(scope="row") 1
        td Column content
        td Column content
        td Column content
      tr.bg-accent
        th(scope="row") 2
        td Column content
        td Column content
        td Column content
      tr.bg-gradient
        th(scope="row") 3
        td Column content
        td Column content
        td Column content
      tr.bg-success
        th(scope="row") 4
        td Column content
        td Column content
        td Column content
      tr.bg-info
        th(scope="row") 5
        td Column content
        td Column content
        td Column content
      tr.bg-warning
        th(scope="row") 6
        td Column content
        td Column content
        td Column content
      tr.bg-danger
        th(scope="row") 7
        td Column content
        td Column content
        td Column content

Tables

Basic example

Invert the colors

Table head options

Striped rows

Bordered table

Hoverable rows

Contextual colors

#	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

#	Class	Heading	Heading
1	Active	Column content	Column content
2	Default	Column content	Column content
1	Primary	Column content	Column content
2	Default	Column content	Column content
1	Secondary	Column content	Column content
2	Default	Column content	Column content
1	Accent	Column content	Column content
2	Default	Column content	Column content
3	Success	Column content	Column content
4	Default	Column content	Column content
5	Info	Column content	Column content
6	Default	Column content	Column content
7	Warning	Column content	Column content
8	Default	Column content	Column content
9	Danger	Column content	Column content

Tables

Code

Code

Code

Code

Code

Code

Code

Basic example

Invert the colors

Table head options

Striped rows

Bordered table

Hoverable rows

Contextual colors