Page d’accueil Ontario.ca
English

Système de conception pour l'Ontario

Tableaux

Utilisez un tableau pour présenter des données et pour aider l’utilisateur à comparer des valeurs semblables ou opposées.

  • Contenu: 
    @use 'sass:color';
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/2-tools/functions/global.functions' as globalFunctions;
@use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;

$ontario-table-caption-background: #0000001a;
$ontario-table-total: #0077a056;
$ontario-table-subtotal: #007b9e1d;
$ontario-table-highlight: #e191003c;
$ontario-table-row-divider: #0000004d;
$ontario-table-zebra-striping: #0000000d;
$ontario-table-shadow--cover: rgba(255, 255, 255, 0);
$ontario-table-shadow--black: rgba(0, 0, 0, 0.2);
$ontario-table-shadow--clear: rgba(252, 0, 0, 0);
$ontario-table-scroller--height: 20px;

$ontario-remcalc-8px: globalFunctions.px-to-rem(8);
$ontario-remcalc-12px: globalFunctions.px-to-rem(12);
$ontario-remcalc-14px: globalFunctions.px-to-rem(14);
$ontario-remcalc-16px: globalFunctions.px-to-rem(16);
$ontario-remcalc-17px: globalFunctions.px-to-rem(17);
$ontario-remcalc-18px: globalFunctions.px-to-rem(18);
$ontario-remcalc-19px: globalFunctions.px-to-rem(19);
$ontario-remcalc-20px: globalFunctions.px-to-rem(20);
$ontario-remcalc-23px: globalFunctions.px-to-rem(23);
$ontario-remcalc-24px: globalFunctions.px-to-rem(24);
$ontario-remcalc-28px: globalFunctions.px-to-rem(28);
$ontario-remcalc-24-5px: globalFunctions.px-to-rem(24.5);
$ontario-remcalc-40px: globalFunctions.px-to-rem(40);

caption {
	background-color: $ontario-table-caption-background;
	padding: $ontario-remcalc-18px $ontario-remcalc-16px $ontario-remcalc-18px $ontario-remcalc-24px;
	text-align: left;
	font-weight: bold;
	font-size: globalFunctions.px-to-rem(22);
	line-height: globalFunctions.px-to-rem(35);

	display: table-caption;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: $ontario-remcalc-20px;
		line-height: globalFunctions.px-to-rem(30);
		padding-left: $ontario-remcalc-16px;
	}
}

.ontario-table-container {
	position: relative;
	margin: $ontario-remcalc-8px 0 $ontario-remcalc-40px 0; //Excludes 20px scrollbar on top and bottom

	table:not(.ontario-table--no-zebra-stripes) {
		tbody {
			tr:first-child:nth-last-child(n + 6),
			tr:first-child:nth-last-child(n + 6) ~ tr {
				&:nth-child(even) {
					background-color: $ontario-table-zebra-striping;
				}
			}
		}
	}
}

.ontario-table-div {
	overflow-x: auto;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		overflow-x: scroll;
	}

	background: linear-gradient(to right, colours.$ontario-colour-white 30%, $ontario-table-shadow--cover),
		linear-gradient(to right, $ontario-table-shadow--cover, colours.$ontario-colour-white 70%) 0 100%,
		linear-gradient(to right, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%),
		linear-gradient(to left, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%);
	background-repeat: no-repeat;
	background-size: $ontario-remcalc-40px 100%, $ontario-remcalc-40px 100%, $ontario-remcalc-14px 100%, $ontario-remcalc-14px 100%;
	background-position: 0 0, 100%, 0 0, 100%;
	background-attachment: local, local, scroll, scroll;
}

.ontario-table-scroll--wrapper {
	height: $ontario-table-scroller--height;
	overflow-x: auto;
	overflow-y: hidden;
	display: block;
}

table {
	border-collapse: collapse;
	font-size: $ontario-remcalc-17px;
	display: table;
	line-height: globalFunctions.px-to-rem(26);
	font-weight: normal;

	&.ontario-table--full-container-width {
		display: table;
		width: 100% !important;
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: $ontario-remcalc-16px;
	}
}

table.ontario-table--condensed {
	td {
		padding: $ontario-remcalc-12px $ontario-remcalc-16px $ontario-remcalc-12px $ontario-remcalc-24px;
		text-align: left;
	}

	td.ontario-table-cell--numeric {
		padding: $ontario-remcalc-12px $ontario-remcalc-24px $ontario-remcalc-12px $ontario-remcalc-16px;
		font-size: $ontario-remcalc-17px;
		text-align: right;
	}

	tbody th,
	tfoot th {
		padding: $ontario-remcalc-12px $ontario-remcalc-16px $ontario-remcalc-12px $ontario-remcalc-24px;
	}

	tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator {
		top: $ontario-remcalc-17px;
	}

	tr.ontario-table-row--subtotal,
	tfoot tr {
		th,
		td {
			padding: $ontario-remcalc-16px $ontario-remcalc-16px $ontario-remcalc-16px $ontario-remcalc-24px;
		}

		td.ontario-table-cell--numeric {
			text-align: right;
			padding: $ontario-remcalc-16px $ontario-remcalc-24px $ontario-remcalc-16px $ontario-remcalc-16px;
		}
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		td {
			padding: $ontario-remcalc-12px $ontario-remcalc-8px $ontario-remcalc-12px $ontario-remcalc-16px;
			font-size: $ontario-remcalc-16px;
		}

		td.ontario-table-cell--numeric {
			padding: $ontario-remcalc-12px $ontario-remcalc-16px $ontario-remcalc-12px $ontario-remcalc-8px;
		}

		tbody th {
			padding: $ontario-remcalc-12px $ontario-remcalc-8px $ontario-remcalc-12px $ontario-remcalc-16px;
		}

		tr.ontario-table-row--subtotal,
		tfoot tr {
			th,
			td {
				padding: $ontario-remcalc-16px $ontario-remcalc-8px $ontario-remcalc-16px $ontario-remcalc-16px;
			}

			td.ontario-table-cell--numeric {
				text-align: right;
				padding: $ontario-remcalc-16px $ontario-remcalc-16px $ontario-remcalc-16px $ontario-remcalc-8px;
			}
		}
	}
}

tbody {
	font-size: $ontario-remcalc-16px;

	vertical-align: top;

	tr {
		border: solid;
		border-width: globalFunctions.px-to-rem(1) 0;
		border-color: $ontario-table-row-divider;
	}

	tr:last-child {
		border-width: globalFunctions.px-to-rem(3) 0;
		border-top-width: 0;
		border-color: colours.$ontario-colour-black;
	}

	tr.ontario-table-row--highlight {
		background-color: $ontario-table-highlight !important;

		th {
			padding-left: $ontario-remcalc-24px;
			display: flex;
			position: relative;

			img.ontario-table--highlight-indicator {
				// Width of yellow triangle svg
				width: $ontario-remcalc-8px;
				position: absolute;
				// Distance from top of svg to top of container
				top: $ontario-remcalc-24px;
				left: 0;
			}
		}
	}
}

thead {
	border: solid;
	border-width: globalFunctions.px-to-rem(3) 0;
	border-color: colours.$ontario-colour-black;
	vertical-align: top;

	th {
		text-align: left;
		padding: $ontario-remcalc-28px $ontario-remcalc-16px $ontario-remcalc-28px $ontario-remcalc-24px;
		margin: spacing.$spacing-0;
		font-size: $ontario-remcalc-18px;
		line-height: $ontario-remcalc-24px;
		text-size-adjust: none;
		-webkit-text-size-adjust: none;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			font-size: $ontario-remcalc-16px;
			line-height: globalFunctions.px-to-rem(21);
			padding: $ontario-remcalc-24-5px $ontario-remcalc-8px $ontario-remcalc-24-5px $ontario-remcalc-16px;
		}
	}

	th.ontario-table-cell--numeric {
		padding: $ontario-remcalc-28px $ontario-remcalc-24px $ontario-remcalc-28px $ontario-remcalc-16px;
		text-align: right;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			padding: $ontario-remcalc-24-5px $ontario-remcalc-16px $ontario-remcalc-24-5px $ontario-remcalc-8px;
		}
	}
}

td.ontario-table-cell--numeric strong {
	font-family: 'Courier Prime', Courier, 'Courier New', monospace;
}

.ontario-table-header--column-span-1 {
	//Equivalent to 1 grid columns
	min-width: 8.33333vw;
}

.ontario-table-header--column-span-2 {
	//Equivalent to 2 grid columns
	min-width: 16.66666vw;
}

.ontario-table-header--column-span-3 {
	//Equivalent to 3 grid columns
	min-width: 25vw;
}

.ontario-table-header--column-span-4 {
	//Equivalent to 4 grid columns
	min-width: 33.33333vw;
}

.ontario-table-header--column-span-5 {
	//Equivalent to 5 grid columns
	min-width: 41.66666vw;
}

.ontario-table-header--column-span-6 {
	//Equivalent to 6 grid columns
	min-width: 50vw;
}

.ontario-table-header--column-span-7 {
	//Equivalent to 7 grid columns
	min-width: 58.33333vw;
}

.ontario-table-header--column-span-8 {
	//Equivalent to 8 grid columns
	min-width: 66.66666vw;
}

.ontario-table-header--column-span-9 {
	//Equivalent to 9 grid columns
	min-width: 75vw;
}

.ontario-table-header--column-span-10 {
	//Equivalent to 10 grid columns
	min-width: 83.33333vw;
}

.ontario-table-header--column-span-11 {
	//Equivalent to 11 grid columns
	min-width: 91.66666vw;
}

.ontario-table-header--column-span-12 {
	//Equivalent to 12 grid columns
	min-width: 100vw;
}

tbody th,
tfoot th {
	padding: $ontario-remcalc-19px $ontario-remcalc-16px $ontario-remcalc-19px $ontario-remcalc-24px;
	text-align: left;
	letter-spacing: globalFunctions.px-to-rem(0.4);
	font-weight: bold;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: $ontario-remcalc-16px;
		line-height: globalFunctions.px-to-rem(26);
		padding: $ontario-remcalc-19px $ontario-remcalc-8px $ontario-remcalc-19px $ontario-remcalc-16px;
	}
}

td {
	padding: $ontario-remcalc-19px $ontario-remcalc-16px $ontario-remcalc-19px $ontario-remcalc-24px;
	text-align: left;
	letter-spacing: globalFunctions.px-to-rem(0.4);

	img {
		vertical-align: top;
		@media screen and (max-width: breakpoints.$small-breakpoint) {
			max-width: none !important;
		}
	}
}

td.ontario-table-cell--numeric,
th.ontario-table-cell--directory {
	padding: $ontario-remcalc-19px $ontario-remcalc-24px $ontario-remcalc-19px $ontario-remcalc-16px;
	text-align: right;
	font-family: 'Courier Prime', Courier, 'Courier New', monospace;
	font-size: $ontario-remcalc-17px;
}

th.ontario-table-cell--directory {
	text-align: left;
	font-weight: fontWeights.$ontario-font-weights-bold;
}

tr.ontario-table-row--subtotal,
tfoot tr {
	border: solid;
	border-width: globalFunctions.px-to-rem(3) 0;
	font-size: $ontario-remcalc-16px;
	border-color: colours.$ontario-colour-black;

	td {
		font-weight: bold;
		padding: $ontario-remcalc-23px $ontario-remcalc-16px $ontario-remcalc-23px $ontario-remcalc-24px;
	}
}

tbody {
	tr.ontario-table-row--subtotal {
		th {
			padding: $ontario-remcalc-23px $ontario-remcalc-16px $ontario-remcalc-23px $ontario-remcalc-24px;
		}
	}
}

tfoot {
	vertical-align: top;

	th {
		padding: $ontario-remcalc-23px $ontario-remcalc-16px $ontario-remcalc-23px $ontario-remcalc-24px;
	}
}

tr.ontario-table-row--subtotal {
	background-color: $ontario-table-subtotal !important;
}

tfoot tr {
	background-color: $ontario-table-total !important;
}

/*Table component colours*/
.ontario-bg-ontario-table-row-divider {
	background-color: $ontario-table-row-divider;
}
.ontario-bg-ontario-table-caption-background {
	background-color: $ontario-table-caption-background;
}
.ontario-bg-ontario-table-highlight {
	background-color: $ontario-table-highlight;
}
.ontario-bg-ontario-table-subtotal {
	background-color: $ontario-table-subtotal;
}
.ontario-bg-ontario-table-total {
	background-color: $ontario-table-total;
}
  • URL: /components/raw/tables/tables.scss
  • Chemin du système de fichiers: fractal/components/components/tables/tables.scss
  • Taille: 11.5 KB
  • Contenu: 
    caption{background-color:#0000001a;padding:1.125rem 1rem 1.125rem 1.5rem;text-align:left;font-weight:bold;font-size:1.375rem;line-height:2.1875rem;display:table-caption}@media screen and (max-width: 40em){caption{font-size:1.25rem;line-height:1.875rem;padding-left:1rem}}.ontario-table-container{position:relative;margin:.5rem 0 2.5rem 0}.ontario-table-container table:not(.ontario-table--no-zebra-stripes) tbody tr:first-child:nth-last-child(n+6):nth-child(even),.ontario-table-container table:not(.ontario-table--no-zebra-stripes) tbody tr:first-child:nth-last-child(n+6)~tr:nth-child(even){background-color:#0000000d}.ontario-table-div{overflow-x:auto;background:linear-gradient(to right, #FFFFFF 30%, rgba(255, 255, 255, 0)),linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 70%) 0 100%,linear-gradient(to right, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%),linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(252, 0, 0, 0) 100.01%);background-repeat:no-repeat;background-size:2.5rem 100%,2.5rem 100%,.875rem 100%,.875rem 100%;background-position:0 0,100%,0 0,100%;background-attachment:local,local,scroll,scroll}@media screen and (max-width: 40em){.ontario-table-div{overflow-x:scroll}}.ontario-table-scroll--wrapper{height:20px;overflow-x:auto;overflow-y:hidden;display:block}table{border-collapse:collapse;font-size:1.0625rem;display:table;line-height:1.625rem;font-weight:normal}table.ontario-table--full-container-width{display:table;width:100% !important}@media screen and (max-width: 40em){table{font-size:1rem}}table.ontario-table--condensed td{padding:.75rem 1rem .75rem 1.5rem;text-align:left}table.ontario-table--condensed td.ontario-table-cell--numeric{padding:.75rem 1.5rem .75rem 1rem;font-size:1.0625rem;text-align:right}table.ontario-table--condensed tbody th,table.ontario-table--condensed tfoot th{padding:.75rem 1rem .75rem 1.5rem}table.ontario-table--condensed tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator{top:1.0625rem}table.ontario-table--condensed tr.ontario-table-row--subtotal th,table.ontario-table--condensed tr.ontario-table-row--subtotal td,table.ontario-table--condensed tfoot tr th,table.ontario-table--condensed tfoot tr td{padding:1rem 1rem 1rem 1.5rem}table.ontario-table--condensed tr.ontario-table-row--subtotal td.ontario-table-cell--numeric,table.ontario-table--condensed tfoot tr td.ontario-table-cell--numeric{text-align:right;padding:1rem 1.5rem 1rem 1rem}@media screen and (max-width: 40em){table.ontario-table--condensed td{padding:.75rem .5rem .75rem 1rem;font-size:1rem}table.ontario-table--condensed td.ontario-table-cell--numeric{padding:.75rem 1rem .75rem .5rem}table.ontario-table--condensed tbody th{padding:.75rem .5rem .75rem 1rem}table.ontario-table--condensed tr.ontario-table-row--subtotal th,table.ontario-table--condensed tr.ontario-table-row--subtotal td,table.ontario-table--condensed tfoot tr th,table.ontario-table--condensed tfoot tr td{padding:1rem .5rem 1rem 1rem}table.ontario-table--condensed tr.ontario-table-row--subtotal td.ontario-table-cell--numeric,table.ontario-table--condensed tfoot tr td.ontario-table-cell--numeric{text-align:right;padding:1rem 1rem 1rem .5rem}}tbody{font-size:1rem;vertical-align:top}tbody tr{border:solid;border-width:.0625rem 0;border-color:#0000004d}tbody tr:last-child{border-width:.1875rem 0;border-top-width:0;border-color:#1a1a1a}tbody tr.ontario-table-row--highlight{background-color:#e191003c !important}tbody tr.ontario-table-row--highlight th{padding-left:1.5rem;display:flex;position:relative}tbody tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator{width:.5rem;position:absolute;top:1.5rem;left:0}thead{border:solid;border-width:.1875rem 0;border-color:#1a1a1a;vertical-align:top}thead th{text-align:left;padding:1.75rem 1rem 1.75rem 1.5rem;margin:0;font-size:1.125rem;line-height:1.5rem;-moz-text-size-adjust:none;text-size-adjust:none;-webkit-text-size-adjust:none}@media screen and (max-width: 40em){thead th{font-size:1rem;line-height:1.3125rem;padding:1.53125rem .5rem 1.53125rem 1rem}}thead th.ontario-table-cell--numeric{padding:1.75rem 1.5rem 1.75rem 1rem;text-align:right}@media screen and (max-width: 40em){thead th.ontario-table-cell--numeric{padding:1.53125rem 1rem 1.53125rem .5rem}}td.ontario-table-cell--numeric strong{font-family:"Courier Prime",Courier,"Courier New",monospace}.ontario-table-header--column-span-1{min-width:8.33333vw}.ontario-table-header--column-span-2{min-width:16.66666vw}.ontario-table-header--column-span-3{min-width:25vw}.ontario-table-header--column-span-4{min-width:33.33333vw}.ontario-table-header--column-span-5{min-width:41.66666vw}.ontario-table-header--column-span-6{min-width:50vw}.ontario-table-header--column-span-7{min-width:58.33333vw}.ontario-table-header--column-span-8{min-width:66.66666vw}.ontario-table-header--column-span-9{min-width:75vw}.ontario-table-header--column-span-10{min-width:83.33333vw}.ontario-table-header--column-span-11{min-width:91.66666vw}.ontario-table-header--column-span-12{min-width:100vw}tbody th,tfoot th{padding:1.1875rem 1rem 1.1875rem 1.5rem;text-align:left;letter-spacing:.025rem;font-weight:bold}@media screen and (max-width: 40em){tbody th,tfoot th{font-size:1rem;line-height:1.625rem;padding:1.1875rem .5rem 1.1875rem 1rem}}td{padding:1.1875rem 1rem 1.1875rem 1.5rem;text-align:left;letter-spacing:.025rem}td img{vertical-align:top}@media screen and (max-width: 40em){td img{max-width:none !important}}td.ontario-table-cell--numeric,th.ontario-table-cell--directory{padding:1.1875rem 1.5rem 1.1875rem 1rem;text-align:right;font-family:"Courier Prime",Courier,"Courier New",monospace;font-size:1.0625rem}th.ontario-table-cell--directory{text-align:left;font-weight:700}tr.ontario-table-row--subtotal,tfoot tr{border:solid;border-width:.1875rem 0;font-size:1rem;border-color:#1a1a1a}tr.ontario-table-row--subtotal td,tfoot tr td{font-weight:bold;padding:1.4375rem 1rem 1.4375rem 1.5rem}tbody tr.ontario-table-row--subtotal th{padding:1.4375rem 1rem 1.4375rem 1.5rem}tfoot{vertical-align:top}tfoot th{padding:1.4375rem 1rem 1.4375rem 1.5rem}tr.ontario-table-row--subtotal{background-color:#007b9e1d !important}tfoot tr{background-color:#0077a056 !important}.ontario-bg-ontario-table-row-divider{background-color:#0000004d}.ontario-bg-ontario-table-caption-background{background-color:#0000001a}.ontario-bg-ontario-table-highlight{background-color:#e191003c}.ontario-bg-ontario-table-subtotal{background-color:#007b9e1d}.ontario-bg-ontario-table-total{background-color:#0077a056}
  • URL: /components/raw/tables/tables.css
  • Chemin du système de fichiers: fractal/components/components/tables/tables.css
  • Taille: 6.5 KB

Principe directeur: Créer des tableaux accessibles à tout le monde.

Dans cette page

Skip this page navigation

Quand utiliser cette composante

Utilisez des tableaux pour présenter de l’information dans des ensembles de données. Les tableaux devraient faciliter la comparaison et l’analyse de l’information.

Quand éviter cette composante

N’utilisez pas des tableaux dans les situations suivantes :

  • pour présenter de l’information non tabulaire dans des tableaux de bord ou d’autres conceptions d’interface – utilisez plutôt une grille de mise en page
  • pour présenter des résultats de recherche ou des listes d’emplacements — utilisez plutôt une liste avec des en-têtes
  • pour présenter des données qui sont longues et comportent beaucoup de texte —utilisez plutôt des en-têtes de pages conventionnelles et des paragraphes
  • pour présenter des données qui conviennent mieux à une visualisation de données robuste — utilisez plutôt un graphique en barres, un infographique ou un autre type de diagramme

Fonctions de la composante

Exemple

Diagramme montrant la structure d'un tableau, y compris l'en-tête, le contenu, le pied, la légende, les titres des colonnes, les cellules des rangées, la rangée surlignée, la rangée du sous-total et la rangée du total.

En-tête du tableau

Légende

La légende est le titre du tableau. Utilisez une légende si vous n’avez pas d’en-tête descriptif (h2 ou h3, par exemple) directement au-dessus du tableau pour préciser son contenu.

Dans une page ayant plusieurs tableaux, utilisez une légende pour chaque tableau afin de rendre l’expérience plus accessible.

Titre des colonnes

Les titres des colonnes sont les en-têtes supérieurs des colonnes du tableau.

Ces titres doivent être :

  • alignés à gauche pour les colonnes contenant du texte régulier
  • alignés à droite pour les colonnes contenant des données numériques

Contenu du tableau

Cellules

Les cellules contiennent les données qui constituent le tableau.

Le tableau consiste en trois types de formats de cellules :

  • En-têtes des rangées — police de caractères gras, alignés à gauche
  • Données texte — police de caractères régulière, alignées à gauche
  • Données numériques — police de caractères à espacement fixe, alignées à droite

Zébrures

Les zébrures ajoutent de l’ombrage aux rangées paires (rangées deux, quatre, etc.). Elles améliorent la lisibilité des tableaux plus longs en guidant l’œil du lecteur le long de la rangée.

Les zébrures sont automatiquement incluses dans les tableaux de plus de cinq (5) rangées.

Vous pouvez désactiver les zébrures en ajoutant la catégorie ontario-table--no-zebra-stripes à l’élément <table>.

Rangée surlignée

Les rangées surlignées sont utilisées pour mettre en évidence une rangée renfermant de l’information importante.

Rangée du sous-total

Une rangée de sous-total est utilisée dans un tableau numérique pour présenter une rangée de sous-total.

Pied du tableau

Rangée du total

Une rangée de total est utilisée dans un tableau numérique pour présenter une rangée récapitulative ou de total.

Les styles seront automatiquement appliqués aux rangées dans la section <tfoot>.

Comportement de la barre de défilement

Le comportement de la barre de défilement pour les tableaux est déterminé par le navigateur et n’est pas intégré dans le composant tableau. Sur les appareils Apple iOS, les barres de défilement peuvent ne pas être entièrement visibles. (Ce comportement est le même pour tous les navigateurs sur iOS, y compris Chrome et Firefox, car ils s’appuient tous sur le moteur de navigation Safari et restituent le contenu de la même manière.) Il n’est pas recommandé d’ajouter des barres de défilement personnalisées aux tableaux.

Tableaux condensés

Les tableaux condensés présentent les données du tableau dans des cellules ayant des éléments réduits de remplissage supérieurs et inférieurs. Utilisez ceci dans des pages ayant plusieurs tableaux avec beaucoup de données, comme des données financières ou budgétaires.

Exemple

Diagramme montrant la différence entre la hauteur par défaut et la hauteur condensée des cellules de contenu.

Tableaux larges

Le contenu du tableau pourrait être trop large pour afficher dans l’espace de l’écran. Ceci arrive couramment sur les écrans d’appareils mobiles ou lorsqu’un large tableau ayant plusieurs colonnes est visualisé sur l’écran d’un ordinateur de bureau.

La composante tableau possède des fonctions intégrées de dépassement qui apparaîtront automatiquement lorsque la largeur du tableau dépasse la partie visible de l’écran :

Example

Diagramme d’un tableau large qui affiche les fonctions intégrées de dépassement des composantes du tableau (ombre et barres de défilement horizontales).

Ombre de dépassement

L’ombre de dépassement indique que les données du tableau dépassent la partie visible du contenu. Elle apparaît automatiquement sur les côtés du tableau qui sont plus larges que la section du contenu.

Barre de défilement horizontale

Une barre de défilement horizontale permet aux utilisateurs de défiler uniquement dans le tableau, et non dans la page entière. Elle apparaît automatiquement au haut et au bas du tableau lorsqu’il est plus large que la section du contenu.

Pratiques exemplaires

À faire

  • S’assurer que le contenu des cellules du tableau est bref et peut être lu rapidement
  • Fournir des légendes de tableau (<caption>) et des titres de rangées et de colonnes (<th>) concis et descriptifs
  • Inclure des unités de mesure dans les titres de colonnes
  • Aligner le texte non numérique à la gauche
  • Aligner les données numériques à la droite et utiliser une police de caractères à espacement fixe (Courier Prime)
    • pour :
      • les montants comme les mesures et les sommes d’argent, y compris les décimaux
      • les valeurs calculées, comme les pourcentages, les moyennes et les médianes
    • mais pas pour :
      • les numéros de téléphone
      • les dates ou les heures (par exemple, les heures d’ouverture)
      • les codes postaux
      • les numéros d’identification
  • Aligner les titres selon les données dans les colonnes — les titres des colonnes de texte doivent être alignés à la gauche et les titres des colonnes de données numériques doivent être alignés à la droite

À faire :

Exemple d'un tableau avec les titres des colonnes de texte alignés à la gauche et les titres des colonnes numériques alignés à la droite.

À ne pas faire :

Exemple d'un tableau avec les titres des données numériques alignés à la gauche.
  • Inclure des zébrures dans les tableaux ayant plus de cinq (5) rangées
  • Organiser l’information de façon logique, soit de façon hiérarchique ou alphabétique
  • S’assurer que les données demeurent cohérentes (utiliser les mêmes unités de mesure, le même nombre de décimaux dans chaque cellule, etc.)
  • Utiliser des tableaux condensés pour :
    • les tableaux uniques ayant de multiples sous-totaux
    • les tableaux dans des pages contenant beaucoup de données ou ayant plusieurs tableaux qui se suivent (par exemple, pages budgétaires ou financières)

À ne pas faire

  • Fusionner les cellules
  • Emboîter les tableaux
  • Aligner le texte au centre
  • Répéter des unités de mesure dans les cellules de données individuelles
  • Laisser des cellules de données vides — utiliser « nul », « 0 » ou « s/o » (pour sans objet; enveloppé d’une étiquette <abbr> avec title="not applicable" ou "not available") dans les cellules vides
  • Inclure plusieurs valeurs de données dans une seule cellule

À faire :

Exemple d'un tableau avec les données séparées en colonnes.

À ne pas faire :

Exemple d'un tableau avec plusieurs données dans les mêmes cellules.

Tableaux complexes

Voici ce dont il faut tenir compte dans la création de tableaux complexes :

  • Divisez le tableau complexe en plusieurs tableaux simples si c’est possible.
  • Décrivez la mise en page et l’organisation du tableau complexe au moyen de l’attribut récapitulatif pour les personnes qui utilisent un appareil fonctionnel.
  • Utilisez les étiquettes <colgroup> / <rowgroup> / <thead> / <tbody> / <tfoot> et les attributs de champ d’application colspan / rowspan / id / dans la codification des tableaux complexes avec des titres irréguliers ou de plusieurs niveaux pour vous assurer que les personnes qui utilisent un appareil fonctionnel ait accès au contenu. Découvrez comment utiliser ces étiquettes et attributs durant le formatage de tableaux avec des titres de plusieurs niveaux et de tableaux avec des titres irréguliers.

Spécifications techniques

Formatez les tableaux au moyen d’éléments HTML sémantiques et d’une structure logique afin de les rendre aussi accessibles que possible.

Utilisez :

  • une étiquette <caption> pour la légende du tableau
  • <tr> pour regrouper des rangées
  • <th> pour créer les cellules de titre
  • <td> pour créer les cellules du tableau
  • <thead> pour regrouper des titres de colonnes
  • <tbody> pour regrouper des rangées qui ne sont pas des titres
  • <tfoot> pour les rangées « total »
  • l’attribut scope dans les titres de rangées et de colonnes pour aider les utilisateurs de lecteurs d’écran à naviguer le tableau
    • titres de colonnes : <th scope="col">
    • titres de rangées : <th scope="row">

Consultez les lignes directrices W3C sur la création de tableaux HTML bien structurés.

Catégories propres à la composante

  • ontario-table-cell--numeric
    • à l’élément <th> pour créer un titre numérique
    • à l’élément <td> pour créer une cellule numérique
  • ontario-table--condensed à l’élément <table> pour créer un tableau condensé
  • ontario-table-row--highlight à l’élément <tr> pour créer une rangée surlignée
    • nécessitera <img class="ontario-table--highlight-indicator" src="highlightIndicatorPath"/> avant le contenu dans l’élément <th>
  • ontario-table-row--subtotal à l’élément <tr> pour créer une rangée de sous-total
  • ontario-table--no-zebra-stripes à l’élément <table> pour retirer les zébrures

Couleurs propres aux composantes

Couleur Nom de la couleur Code hex Variable SCSS Notes
Séparateur des rangées du tableau #B2B2B2 $ontario-table-row-divider Utilisée pour séparer les rangées de contenu
Arrière-plan de la légende du tableau #E5E5E5 $ontario-table-caption-background Utilisée pour la rangée de la légende
Sections surlignées du tableau #F8E5C3 $ontario-table-highlight Utilisée pour les rangées surlignées
Sous-total du tableau #E2F0F4 $ontario-table-subtotal Utilisée pour la rangée du sous-total
Total du tableau #A9D1DF $ontario-table-total Utilisée pour la rangée du total

Si vous avez des questions ou souhaitez donner de la rétroaction, veuillez communiquer avec nous.