Tables

Your daily dose of sports gossip and game-day glory!

Bootstrap Docs

Basic example

#	First Name	Last Name	Position	Phone
1	John	Doe	CEO, Founder	+86 138-
2	Anna	Cabana	Designer	+86 138-
3	Kale	Thornton	Developer	+86 138-
4	Jane	Birkins	Support	+86 138-

<!-- 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>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Jane</td>
        <td>Birkins</td>
        <td>Support</td>
        <td>+86 138-</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 +86 138-="row") 2
        td Anna
        td Cabana
        td Designer
        td +86 138-="row") 3
        td Kale
        td Thornton
        td Developer
        td +86 138-="row") 4
        td Jane
        td Birkins
        td Support
        td +86 138-

Dark table

#	First Name	Last Name	Position	Phone
1	John	Doe	CEO, Founder	+86 138-
2	Anna	Cabana	Designer	+86 138-
3	Kale	Thornton	Developer	+86 138-
4	Jane	Birkins	Support	+86 138-

<!-- 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>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>Jane</td>
        <td>Birkins</td>
        <td>Support</td>
        <td>+86 138-</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 +86 138-="row") 2
        td Anna
        td Cabana
        td Designer
        td +86 138-="row") 3
        td Kale
        td Thornton
        td Developer
        td +86 138-="row") 4
        td Jane
        td Birkins
        td Support
        td +86 138-

Striped rows

#	First Name	Last Name	Position	Phone
1	John	Doe	CEO, Founder	+86 138-
2	Anna	Cabana	Designer	+86 138-
3	Kale	Thornton	Developer	+86 138-

#	First Name	Last Name	Position	Phone
1	John	Doe	CEO, Founder	+86 138-
2	Anna	Cabana	Designer	+86 138-
3	Kale	Thornton	Developer	+86 138-

<!-- 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>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+86 138-</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>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+86 138-</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 +86 138-="row") 2
        td Anna
        td Cabana
        td Designer
        td +86 138-="row") 3
        td Kale
        td Thornton
        td Developer
        td +86 138-// 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 +86 138-="row") 2
        td Anna
        td Cabana
        td Designer
        td +86 138-="row") 3
        td Kale
        td Thornton
        td Developer
        td +86 138-

Bordered table

#	First Name	Last Name	Position	Phone
1	John	Doe	CEO, Founder	+86 138-
2	Anna	Cabana	Designer	+86 138-
3	Kale	Thornton	Developer	+86 138-

#	First Name	Last Name	Position	Phone
1	John	Doe	CEO, Founder	+86 138-
2	Anna	Cabana	Designer	+86 138-
3	Kale	Thornton	Developer	+86 138-

<!-- 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>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+86 138-</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>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+86 138-</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 +86 138-="row") 2
        td Anna
        td Cabana
        td Designer
        td +86 138-="row") 3
        td Kale
        td Thornton
        td Developer
        td +86 138-// 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 +86 138-="row") 2
        td Anna
        td Cabana
        td Designer
        td +86 138-="row") 3
        td Kale
        td Thornton
        td Developer
        td +86 138-

Hoverable rows

#	First Name	Last Name	Position	Phone
1	John	Doe	CEO, Founder	+86 138-
2	Anna	Cabana	Designer	+86 138-
3	Kale	Thornton	Developer	+86 138-

#	First Name	Last Name	Position	Phone
1	John	Doe	CEO, Founder	+86 138-
2	Anna	Cabana	Designer	+86 138-
3	Kale	Thornton	Developer	+86 138-

<!-- 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>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+86 138-</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>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Anna</td>
        <td>Cabana</td>
        <td>Designer</td>
        <td>+86 138-</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Kale</td>
        <td>Thornton</td>
        <td>Developer</td>
        <td>+86 138-</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 +86 138-="row") 2
        td Anna
        td Cabana
        td Designer
        td +86 138-="row") 3
        td Kale
        td Thornton
        td Developer
        td +86 138-// 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 +86 138-="row") 2
        td Anna
        td Cabana
        td Designer
        td +86 138-="row") 3
        td Kale
        td Thornton
        td Developer
        td +86 138-

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
5	Accent	Column content	Column content
6	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-accent">
        <th scope="row">3</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-accent
        th(scope="row'") 3
        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	+86 138-
2	Anna	Cabana	Designer	+86 138-

#	First Name	Last Name	Position	Phone
1	John	Doe	CEO, Founder	+86 138-
2	Anna	Cabana	Designer	+86 138-

<!-- Color borders on tables -->
<table class="table table-bordered border-accent">
  ...
</table>
<table class="table table-bordered border-danger">
  ...
</table>

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