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

The default styling — light padding, striped rows 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 — 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
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>

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>