Tables

Taxonomic name: M-TABLE

CORE COMPONENT

v.4.10.0 - Updated 21/06/19. Archives

Molecule

Tables can be useful to compare, show relationships between, or find specific pieces of information.

Structure

  • To indicate positive or negative values the up/down icons are used
  • Numeric indicators icons go on the right of the number only
  • Only one icon can be used per cell
  • PROHIBITED: Changing the font colour
  • For long or complex tables, consider the use of pagination to provide more manageable chunks for users to review.

Labels

  • Numeric indicator icon usage conveys the positive/negative indication and in this use case a separate indicator is not required
  • Give headings concise, clear, meaningful labels

Placement

  • Non stackable tables scroll horizontally in a mobile view.
  • Make use of stackable tables and implement them correctly to ensure that mobile users can access the information.

Use case and exception scenarios

  • Numeric indicators should be used to highlight funds’ performance with up/down arrows
  • PROHIBITED: Show/hides should not be used within tables.

Examples

Scrollable table

  Aviva AXA Direct Line Post Office Virgin
Online discount Included Not included Not included Not included Not included
Pre-travel service Included Not included Not included Not included Not included
Daily £ benefit when in hospital Included Not included Not included Not included Not included
Payment for loss of driving licence Included Not included Not included Not included Not included
  Aviva AXA Direct Line Post Office Virgin
Online discount Included Not included Not included Not included Not included
Pre-travel service Included Not included Not included Not included Not included
Daily £ benefit when in hospital Included Not included Not included Not included Not included
Payment for loss of driving licence Included Not included Not included Not included Not included

Scrollable comparison table (first column fixed)

  Aviva AXA Direct Line Post Office Virgin
Online discount Included Not included Not included Not included Not included
Pre-travel service Included Not included Not included Not included Not included
Daily £ benefit when in hospital Included Not included Not included Not included Not included
Payment for loss of driving licence Included Not included Not included Not included Not included
  Aviva AXA Direct Line Post Office Virgin
Online discount Included Not included Not included Not included Not included
Pre-travel service Included Not included Not included Not included Not included
Daily £ benefit when in hospital Included Not included Not included Not included Not included
Payment for loss of driving licence Included Not included Not included Not included Not included

Comparison table (stacked at mobile)

This table is only designed to work with icons.

  Aviva AXA Direct Line Post Office Virgin
Online discount Included Not included Not included Not included Not included
Pre-travel service Included Not included Not included Not included Not included
Daily £ benefit when in hospital Included Not included Not included Not included Not included
Payment for loss of driving licence Included Not included Not included Not included Not included

Table with numeric indicators

  Aviva AXA Direct Line Post Office Virgin
Online discount 5.01% 2.22% 2.22% 2.22% 2.22%
Pre-travel service 10% 2.22% 2.22% 2.22% 2.22%
Daily £ benefit when in hospital 0.33% 2.22% 2.22% 2.22% 2.22%
Payment for loss of driving licence 8.70% 2.22% 2.22% 2.22% 2.22%

Table with zebra stripes (Stacking at mobile by row)

  Aviva AXA Direct Line Post Office Virgin
Online discount Not included Not included Hazardous goods are carried Not included Not included
Pre-travel service Included Social, domestic & pleasure Hazardous goods are carried Not included Not included
Daily £ benefit when in hospital Included Social, domestic & pleasure Not included Third party fire and theft Social, domestic & pleasure

Table with no keylines or zebra stripes (Stacking at mobile by column)

In mobile view this table stacks by column using javascript. Without javascript, the table becomes scrollable when in mobile view.

  Aviva AXA Direct Line Post Office Virgin
Online discount Not included Not included Hazardous goods are carried Not included Not included
Pre-travel service Included Social, domestic & pleasure Hazardous goods are carried Not included Not included
Daily £ benefit when in hospital Included Social, domestic & pleasure Not included Third party fire and theft Social, domestic & pleasure

Notes for developers

All th elements must have the scope attribute set appropriately.

If required you can adjust the width of numeric indicator table columns in order to remove unnecessary white space on the left of the right aligned content. In order to apply the custom spacing add colgroup as the first element within your table.

<colgroup>
	<col width="..." />
</colgroup>

Numeric icons are coded as an:after. To prevent the icon repeating within a table cell ensure that only the text is included within a td containing the class a-numeric-indicator--negative-icon or a-numeric-indicator--positive-icon.

Code Examples

Scrollable table

  Aviva AXA Direct Line Post Office Virgin
Online discount Included Not included Not included Not included Not included
Pre-travel service Included Not included Not included Not included Not included
Daily £ benefit when in hospital Included Not included Not included Not included Not included
Payment for loss of driving licence Included Not included Not included Not included Not included 
<div class="m-table" data-module="scrollable">
	<table>
		<thead>
			<tr>
				<td>&nbsp;</td>
				<th scope="col">...</th>
				<th scope="col">...</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">...</th>
				<td><span class="m-table__icon m-table__icon--tick">Included</span></td>
				<td><span class="m-table__icon m-table__icon--cross">Not included</span></td>
				<td>...</td>
			</tr>
			...
		</tbody>
	</table>
</div>

Scrollable table with zebra stripes and without content keylines

  Aviva AXA Direct Line Post Office Virgin
Online discount Included Not included Not included Not included Not included
Pre-travel service Included Not included Not included Not included Not included
Daily £ benefit when in hospital Included Not included Not included Not included Not included
Payment for loss of driving licence Included Not included Not included Not included Not included 
<div class="m-table m-table--no-content-keylines m-table--zebra-stripes" data-module="scrollable">
<table>
	<thead>
		<tr>
			<td>&nbsp;</td>
			<th scope="col">...</th>
			<th scope="col">...</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="row">...</th>
			<td><span class="m-table__icon m-table__icon--tick">Included</span></td>
			<td><span class="m-table__icon m-table__icon--cross">Not included</span></td>
			<td>...</td>
		</tr>
		...
	</tbody>
</table>
</div>

Scrollable comparison table (first column fixed)

This table is only designed to work with icons.

  Aviva AXA Direct Line Post Office Virgin
Online discount Included Not included Not included Not included Not included
Pre-travel service Included Not included Not included Not included Not included
Daily £ benefit when in hospital Included Not included Not included Not included Not included
Payment for loss of driving licence Included Not included Not included Not included Not included 
<div class="m-table" data-module="m-comparison-table">
	<table>
		<thead>
			<tr>
				<td>&nbsp;</td>
				<th scope="col">...</th>
				<th scope="col">...</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">...</th>
				<td><span class="m-table__icon m-table__icon--tick">Included</span></td>
				<td><span class="m-table__icon m-table__icon--cross">Not included</span></td>
				<td>...</td>
			</tr>
			...
		</tbody>
	</table>
</div>

Comparison table (stacked at mobile)

  Aviva AXA Direct Line Post Office Virgin
Online discount Included Not included Not included Not included Not included
Pre-travel service Included Not included Not included Not included Not included
Daily £ benefit when in hospital Included Not included Not included Not included Not included
Payment for loss of driving licence Included Not included Not included Not included Not included 
<div class="m-table m-table--comparison" data-module="scrollable">
	<table>
		<thead>
			<tr>
				<td>&nbsp;;</td>
				<th scope="col">[ Title 1 ]</th>
				<th scope="col">[ Title 2 ]</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">...</th>
				<td data-th="[ Title 1 ]"><span class="m-table__icon m-table__icon--tick">Included</span></td>
				<td data-th="[ Title 2 ]"><span class="m-table__icon m-table__icon--cross">Not included</span></td>
			</tr>
			...
		</tbody>
	</table>
</div>
  Aviva AXA Direct Line Post Office Virgin
Online discount 5.01% 2.22% 2.22% 2.22% 2.22%
Pre-travel service 10% 2.22% 2.22% 2.22% 2.22%
Daily £ benefit when in hospital 0.33% 2.22% 2.22% 2.22% 2.22%
Payment for loss of driving licence 8.70% 2.22% 2.22% 2.22% 2.22% 
<div class="m-table" data-module="scrollable">
	<table>
		<colgroup>
			<col />
			<col width="..." />
			<col width="..." />
		</colgroup>
		<thead>
			<tr>
				<td>&nbsp;</td>
				<th scope="col">...</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">...</th>
				<td class="a-numeric-indicator--positive-icon">...</td>
			</tr>
			<tr>
				<th scope="row"> ... </th>
				<td class="a-numeric-indicator--negative-icon">...</td>
			</tr>
		</tbody>
	</table>
</div>

Table stacking at mobile by row

  Aviva AXA Direct Line Post Office Virgin
Online discount Not included Not included Hazardous goods are carried Not included Not included
Pre-travel service Included Social, domestic & pleasure Hazardous goods are carried Not included Not included
Daily £ benefit when in hospital Included Social, domestic & pleasure Not included Third party fire and theft Social, domestic & pleasure 
	
<div class="m-table m-table--stackable-row m-table--zebra-stripes">
	<table>
		<thead>
			<tr>
				<td>&nbsp;</td>
				<th scope="col">[ Title 1 ]</th>
				<th scope="col">[ Title 2 ]</th>
			</tr>
		</thead>
		<tbody class="m-table__body-row-data--text-center">
			<tr>
				<th scope="row">[ Label 1 ]</th>
				<td data-th="[ Title 1 ]">[ Content 1 ]</td>
				<td data-th="[ Title 2 ]">[ Content 2 ]</td>
			</tr>
			<tr>
				<th scope="row">[ Label 2 ]</th>
				<td data-th="[ Title 1 ]">[ Content 1 ]</td>
				<td data-th="[ Title 2 ]">[ Content 2 ]</td>
			</tr>
		</tbody>
	</table>
</div>

Table stacking at mobile by column

In mobile view this table stacks by column using javascript. Without javascript, the table becomes scrollable when in mobile view.

  Aviva AXA Direct Line Post Office Virgin
Online discount Not included Not included Hazardous goods are carried Not included Not included
Pre-travel service Included Social, domestic & pleasure Hazardous goods are carried Not included Not included
Daily £ benefit when in hospital Included Social, domestic & pleasure Not included Third party fire and theft Social, domestic &pleasure 
	
<div class="m-table m-table--stackable-column" data-module="m-stackable-column-table">
	<table>
		<thead class="m-table--text-left">
			<tr>
				<td>&nbsp;</td>
				<th scope="col">[ Title 1 ]</th>
				<th scope="col">[ Title 2 ]</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">[ Label 1 ]</th>
				<td data-th="[ Label 1 ]">[ Content 1 ]</td>
				<td data-th="[ Label 1 ]">[ Content 2 ]</td>
			</tr>
			<tr>
				<th scope="row">[ Label 2 ]</th>
				<td data-th="[ Label 2 ]">[ Content 1 ]</td>
				<td data-th="[ Label 2 ]">[ Content 2 ]</td>
			</tr>
		</tbody>
	</table>
</div>

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class Outcome Required Applied to Comments
.m-table Base style for tables Yes div  
.m-table--comparison Modifier for creating a stacked comparison table on small screens   .m-table Not for use in conjunction with scrollable tables
.m-table--stackable-row Modifier for creating a stackable table by row label in mobile view   .m-table Not for use in conjunction with comparison tables or scrollable tables
.m-table--stackable-column Modifier for creating a stackable table by column header in mobile view   .m-table Not for use in conjunction with comparison tables or scrollable tables
.m-table--zebra-stripes Modifier for applying zebra stripes to a table   .m-table Can be used on any table.
.m-table--no-content-keylines Modifier to remove the keylines in the table   .m-table Leaves the vertical keyline between the table row label and the table data
.m-table__standard-icon Base style for functional and solid icons   img Applies sizing to icon and when in mobile view, puts the icon inline to the text.
.m-table__icon Base style an icon displayed within a table cell   span Ensure the text within the element is meaningful if the icon was not there
.m-table__icon--tick Modifier to set the icon to a tick   .m-table__icon  
.m-table__icon--cross Modifier to set the icon to a cross   .m-table__icon  
.a-numeric-indicator--positive-icon Modifier to add a positive numeric indicator icon   td  
.a-numeric-indicator--negative-icon Modifier to add a negative numeric indicator icon   td  
.m-table--text-center Modifier to set text align in the element to centre   .m-table, thead, tbody, tr  
.m-table--text-left Modifier to set text align in the element to left   .m-table, thead, tbody, tr  
.m-table__body-row-data--text-center Modifier to set the td text align to centre   tbody  
.m-table__body-row-header--text-center Modifier to set the th text align to centre   tbody  
.m-table__body-row-data--text-left Modifier to set the td text align to left   tbody  
.m-table__body-row-header--text-left Modifier to set the th text align to left   tbody