Tables

Taxonomic name: M-TABLE

CORE COMPONENT

v.4.0.0 - Updated 20/07/18. 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

  • Tables scroll horizontally in a mobile view.
  • Carefully consider the use of tables in a mobile view, as they are difficult to digest at this size, particularly where a user needs to compare 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%

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

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__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