Taxonomic name: M-TABLE
Added on: v3.0.0 (15/09/17)
Updated on: DESY v.2023.01 (26/10/23)

Tables

Les tableaux peuvent être utiles pour comparer, montrer les relations entre les éléments d'information ou trouver des éléments d'information spécifiques.

Design and usage

Structure

Les colonnes du tableau sont fixés pour avoir la même largeur
Les icônes haut/bas sont utilisées pour indiquer les valeurs positives ou négatives.
Les icônes des indicateurs numériques se trouvent uniquement à droite du chiffre.
Une seule icône peut être utilisée par cellule
INTERDIT : changer la couleur de la police
Pour les tableaux longs ou complexes, envisagez l'utilisation de la pagination afin de fournir aux utilisateurs des parties plus faciles à gérer, plus facile à gérer pour les utilisateurs.

Labels

L'utilisation de l'icône de l'indicateur numérique transmet l'indication positive/négative et dans ce cas d'utilisation, un indicateur séparé n'est pas nécessaire.
Donner aux titres des libellés concis, clairs et significatifs

Placement

Les tableaux non empilables défilent horizontalement dans une vue mobile.
Utilisez des tableaux empilables et mettez-les en œuvre correctement pour que les utilisateurs mobiles puissent accéder à l'information.

Cas d'utilisation et scénarios d'exception

Des indicateurs numériques devraient être utilisés pour mettre en évidence les performances des fonds à l'aide de flèches vers le haut ou vers le bas.
INTERDIT : Les fonctions Afficher/Masquer (Show/hides) ne doivent pas être utilisées dans les tableaux.

Examples

Scrollable table

Interactive example

Code example

										<div class="m-table" tabindex="0" data-module="u-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)

Interactive example

Code example

										<div class="m-table" tabindex="0" 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)

This table is only designed to work with icons.

Interactive example

Code example

										<div class="m-table m-table--comparison" tabindex="0" data-module="u-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>

Table with numeric indicators

Interactive example

Code example

										<div class="m-table m-table--no-fixed" tabindex="0" data-module="u-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

Interactive example

Code example

										<div class="m-table m-table--stackable-row">
											<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">[ 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.

Interactive example

Code example

										<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>[ Content 1 ]</td>
														<td>[ Content 2 ]</td>
													</tr>
													<tr>
														<th scope="row">[ Label 2 ]</th>
														<td>[ Content 1 ]</td>
														<td>[ Content 2 ]</td>
													</tr>
												</tbody>
											</table>
										</div>

Development and test

Notes for developers

All th elements must have the scope attribute set appropriately.

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.

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--no-fixed`	Désactive la largeur égale pour les colonnes		`.m-table`
`.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`

Component releases

Added on: v3.0.0 (15/09/17)
Updated on: v5.0.0 (05/10/20)

Latest update:

updated: Data module used for scrollable was renamed to match standard naming conventions for scrollable to u-scrollable.
updated: The m-table element must have tabindex="0" set on it to ensure that if the table becomes scrollable at any screen size the area is accessibile via the keyboard.
updated: Tables stacked by column no longer require a data attribute setting for each table cell mirroring the value of the row header.

Full version history

A full history of changes and enhancements detailing all minor and major updates to the component.

View full version history

Want something new in Framework, or to chat about an issue you're having with it?

Contact the team