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:

The default design for table grid
Plain table grid design
Zebra table grid design
Table grid design row heights/size
Hover table rows
Active table row
Error validation table row
Responsive tables
Demo tables

Table grid size variants:

Condensed table grid design: 32px row height
Default table grid design: 40px row height
Regular table grid design: 48px row height
Relaxed table grid design: 56px row height

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
Show per page: 6 of 367 items Jump to page:

					

<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 grid design: 32px row height
Default table grid design: 40px row height
Regular table grid design: 48px row height
Relaxed table grid design: 56px row height

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
Summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis nisi eleifend, sagittis ligula tempor, facilisis ligula. Integer non nunc non tortor faucibus mattis porttitor ac massa vestibulum vel ipsum vitae. Sed fringilla consequat libero, blandit pulvinar metus lobortis sit amet. Skills: Manager Level: 83%
	Jacob	Thornton	@fat
Validation got interrupted!
Summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis nisi eleifend, sagittis ligula tempor, facilisis ligula. Integer non nunc non tortor faucibus mattis porttitor ac massa vestibulum vel ipsum vitae. Sed fringilla consequat libero, blandit pulvinar metus lobortis sit amet. Skills: Technician Level: 70%
	Larry	the Bird	@twitter
Summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis nisi eleifend, sagittis ligula tempor, facilisis ligula. Integer non nunc non tortor faucibus mattis porttitor ac massa vestibulum vel ipsum vitae. Sed fringilla consequat libero, blandit pulvinar metus lobortis sit amet. Skills: Designer Level: 85%
	Stan	Lucas	@mdo
Summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis nisi eleifend, sagittis ligula tempor, facilisis ligula. Integer non nunc non tortor faucibus mattis porttitor ac massa vestibulum vel ipsum vitae. Sed fringilla consequat libero, blandit pulvinar metus lobortis sit amet. Skills: Developer Level: 90%
	John	Snow	@fb
Summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis nisi eleifend, sagittis ligula tempor, facilisis ligula. Integer non nunc non tortor faucibus mattis porttitor ac massa vestibulum vel ipsum vitae. Sed fringilla consequat libero, blandit pulvinar metus lobortis sit amet. Skills: Project Owner Level: 100%
	Ben	Johnas	@fat
Summary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis nisi eleifend, sagittis ligula tempor, facilisis ligula. Integer non nunc non tortor faucibus mattis porttitor ac massa vestibulum vel ipsum vitae. Sed fringilla consequat libero, blandit pulvinar metus lobortis sit amet. Skills: Junior Designer Level: 35%
Selected: 0 out of 6 items

					

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

Tables

Use when

Design

Plain tables

Zebra tables variant

Size

Condensed table

Regular size table

Relaxed size table

Table row state

Hover on rows

Active rows

Error validation table row

Responsive tables

Demo tables

Summary:

Summary:

Summary:

Summary:

Summary:

Summary: