Basic Tables

Basic example

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

# Name Email Access
1 Mark xyz@Example.com Business
2 Jacob xyz@Example.com Personal
3 Larry xyz@Example.com Disabled
Bordered table

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

# First Name Last Name Username
1 Mark Otto @mdo
2 Mark Otto @TwBootstrap
3 Larry the Bird @twitter
Striped rows

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

# Name Closed items Open Items process
1 IOS 5 60% 3 40%
2 Crypto 3 65% 2 35%
3 Web 4 88% 1 12%
Table head options

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

# Name Email Access Action
1 Mark xyz@Example.com Business
2 Jacob xyz@Example.com Personal
3 Larry xyz@Example.com Disabled
Dark table

Your awesome text goes here.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
Contextual classes

Use contextual classes to color table rows or individual cells.

# First Name Last Name Username
1 Mark Otto @mdo
2 Larry the Bird @twitter
3 Jacob Thornton @fat