Tables

Taxonomic name: M-TABLE

CORE COMPONENT

v.4.6.0 - Updated 01/02/19. Archives

Molecule

Design
Code

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`