1. Night Owl
  2. Tables
  3. Basic Tables

Basic Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>.

# Name Email Access
1 Gavin example@domain.com Business
2 Jack example@domain.com Personal
3 Ryan example@domain.com Disabled

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

# First Name Last Name Username
1 Bennet Ludwig @bLud
2 Bennet Ludwig @bLud
3 Havasi Vendel @twitter

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

# First Name Last Name Username
1 Bennet Ludwig @bLud
2 Bennet Ludwig @bLud
3 Bennet Ludwig @bLud

Table head options

Use one of two modifier classes to make <thead>s appear light or dark gray.

# Name Email Access
1 Gavin example@domain.com Business
2 Jack example@domain.com Personal
3 Ryan example@domain.com Disabled

Dark table

Your awesome text goes here.

# First Name Last Name Username
1 Bennet Ludwig @bLud
2 Bennet Ludwig @bLud
3 Bennet Ludwig @bLud
Contextual classes

Use contextual classes to color table rows or individual cells.

# First Name Last Name Username
1 Bennet Ludwig @bLud
2 Bennet Ludwig @bLud
3 Bennet Ludwig @bLud