Tables

Tables (or grids as UX designers are calling them) are used to display, manipulate and organise large amounts of data. The grid can be a fairly complex interface element with loads of functionality. An example of where a grid can be suitable is when you are to display an overview of e.g. documents or register posts. Read more about tables/grids in the UX Guidelines.

Use when

  • You are to display large amounts of data in a structured way
  • The user needs to be able to sort, search, filter or otherwise manipulate the data

Design

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

Contact Information
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb
					
<table class="table"> <caption>Contact Information</caption> <thead> <tr> <th scope="col">#</th> <th scope="col">First Name</th> <th scope="col">Last Name</th> <th scope="col">Username</th> </tr> </thead> <tbody> <tr> <td scope="row">1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <td scope="row">2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> ... </tbody> </table>

Hover on rows

For this style you need to add this additional class .table-hover to your table.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb
					
<table class="table table-hover"> ... </table>

Active rows

For this style you need to add this additional class .table-active to your table. For case, the hover on each row will apply too.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb
					
<table class="table table-active"> ... </table>

Condensed table

Add .table-condensed to make tables more compact by cutting cell padding.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb
					
<table class="table table-active"> ... </table>

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 992px). When viewing on anything larger than 992px wide, you will not see any difference in these tables.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Stan Lucas @mdo
5 Ben Johnas @fat
6 John Snow @fb
					
<div class="table-responsive"> <table class="table"> ... </table> </div>