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

On this page you can find multiple types of grid table component and the style variants:

Table grid size variants:


Design

The default styling — light padding and only horizontal dividers — add the base class .table to any <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
Users listed in this table: 6
					
<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> <tfoot> <tr> <td colspan="2"> Users listed in this table: <b>6</b> </td> <td colspan="2"> <div class="d-flex justify-content-end"> <button class="btn btn-primary mb-0">Confirm</div> <button class="btn mb-0">Cancel</div> </div> </td> </tr> </tfoot> </table>

Plain tables

For plain styling — light padding and no striped rows or horizontal dividers — add the class .table-plain (together with the base class) to any <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-plain"> <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> <tfoot> <tr> <td colspan="5"> <nav class="d-flex justify-content-end" aria-label="Page navigation for the data grid"> <ul class="pagination pagination-round"> <li> <label for="quantityPerPage">Show per page:</label> </li> <li> <select name="perPage" id="quantityPerPage" class="quantity mr-8"> <option value="24">24</option> <option value="52">24</option> <option value="75">24</option> <option selected value="100">24</option> </select> </li> <li> <button class="go2first btn" disabled>Go to first page</button> </li> <li> <button class="prev btn" disabled>Previous page</button> </li> <li> <b class="ml-8">100</b> </li> <li> <span>of</span> </li> <li> <b>729</b> </li> <li> <span class="mr-8">items</span> </li> <li> <button class="next btn">Next page</button> </li> <li> <button class="go2last btn">Go to last page</button> </li> <li> <label class="ml-8" for="jumpToPage">Jump to page:</label> </li> <li> <input type="number" id="jumpToPage" name="pageJump" size="1" min="1" max="8"> </li> </ul> </nav> </td> </tr> </tfoot> </table>

Zebra tables variant

For adding the old zebra stripe styling (striped rows and vertical dotted dividers), add the class .table-stripe (together with the base class) to any <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
Users listed in this table: 6
					
<table class="table table-stripe"> <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> <tfoot> <tr> <td colspan="2"> Users listed in this table: <b>6</b> </td> <td colspan="2"> <div class="d-flex justify-content-end"> <button class="btn btn-primary mb-0">Confirm</div> <button class="btn mb-0">Cancel</div> </div> </td> </tr> </tfoot> </table>

Size

Table grid size variants:

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-condensed"> ... </table>

Regular size table

Add .table-regular 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-regular"> ... </table>

Relaxed size table

Add .table-relaxed 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-relaxed"> ... </table>

Table row state

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>

Error validation table row

For this style you need to add the .has-errorclass to table row tag (<tr>). To indent the error icon just wrap it in container with the .indent-error class, the indent works only for the first table cell.

# First Name Last Name Username
1 Mark Otto @mdo
2 - (with tr.has-error) Jacob Thornton @fat
3 Stan Lucas @mdo
4 - (without tr.has-error) Ben Johnas @fat
					
<table class="table table-active"> ... <tbody> ... <tr class="has-error"> <td scope="row"> <span class="indent-error"> <span class="vismaicon vismaicon-error"></span> </span> 2 </td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> ... </tbody> </table>

Add the .px-32 helper class to the table tag to include the indent inside the table borders but outside the cell table.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Stan Lucas @mdo
4 Ben Johnas @fat
					
<table class="table px-32"> ... </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>

Demo tables

Interactive table with functionality, added through a custom javascript, for demonstration purposes.

First Name Last Name Username
Mark Otto @mdo
Jacob Thornton @fat
Larry the Bird @twitter
Stan Lucas @mdo
John Snow @fb
Ben Johnas @fat
Selected: 0 out of 6 items
					
<div class="table-responsive"> <table class="table"> ... </table> </div>