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 Update
Plain table grid design Update
Zebra table grid design Update
Table grid design row heights/size New
Hover table rows Update
Active table row Update
Error validation table row New
Responsive tables
Demo tables New

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 Update

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 Update

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
Users listed in this table: 6

					

<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="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>

Zebra tables variant Update

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 New

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 Update

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 New

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 New

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 Update

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 Update

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 New

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 Update

Plain tables Update

Zebra tables variant Update

Size New

Condensed table Update

Regular size table New

Relaxed size table New

Table row state

Hover on rows Update

Active rows Update

Error validation table row New

Responsive tables

Demo tables

Summary:

Summary:

Summary:

Summary:

Summary:

Summary: