Tables (Tableaux)
Les tableaux permettent aux utilisateurs de lire et analyser facilement des lignes de données structurées. Ces dernières sont rangées sous la forme d’une grille, l’objectif étant de faciliter la compréhension des données en visualisant leurs relations.
Usage
Chaque tableau peut contenir ces éléments :
- En-tête des colonnes. Il informe de la nature de chaque colonne. Il est facultatif, mais fortement conseillé.
- En-tête des rangs. Il informe de la nature de chaque ligne. Il est facultatif.
- Séparateur de rangs. Il comporte une bordure qui permet de bien distinguer chaque rang.
- Séparateur de colonnes. Il aide l’utilisateur à analyser les données associées. Il est facultatif.
- Cellule. Une cellule peut contenir du texte standard, des boutons, des icônes… Lorsqu’une grande quantité d’information est présente, un texte peut être sur plusieurs lignes.
- Défilement horizontal. Lors de grands tableaux, l’ensemble du tableau peut être swipé. Une option permet de conserver fixé certaines colonnes.
Bonnes pratiques
- Aligner à gauche les données textuelles
- Aligner à droite les données numériques. Les données numériques doivent être alignées à droite pour faciliter la lecture et la comparaison. Elles peuvent être alignées à gauche uniquement lorsqu’elles ne peuvent pas être comparées ou combinées arithmétiquement (par exemple : codes postaux, adresses IP, numéros de téléphone).
- Utilisez les séparateurs de colonnes avec parcimonie
- Utilisez un tiret (–) pour les valeurs manquantes. Lorsqu’il y a une absence de données, utilisez un tiret (–) pour représenter les valeurs nulles ou non applicables. Ce tiret est aligné de la même manière que s’il était une donnée.
- Dans la plupart des cas, les tableaux sont aussi larges que la zone de contenu de la page. Cependant, s’il n’y a pas beaucoup de contenu, cette largeur rend la lecture et la compréhension difficiles. Pour résoudre ce problème, réduisez la largeur totale du tableau pour l’adapter au contenu.
Style & code
Dépendances :
- Classe
sipauisur un parent (par exemple le<body>), - Helpers (classes d’aide).
Les tableaux sont réservés à du contenu éditorial puisqu’ils sont utilisés pour afficher de la donnée. Ils sont donc, par défaut, liés à la classe su-article. Toutefois, il peut y avoir besoin de gérer plus finement l’apparence du tableau que ce que peut permettre un affichage par défaut. Pour cela (ainsi que lorsque l’on veut utiliser un tableau hors zone d’article) il faudra utiliser la classe su-data-table (la classe su-table est une classe de changement de display CSS dans les helpers).
Tableau par défaut
Il s’agit du tableau par défaut, sans utilisation de classe. Il n’est donc pas personnalisable.
Dans cet exemple avec le tableau dans un article il faut donc la classe su-article sur un parent. Dans ce contexte où aucune classe n’est applicable, on ne pourra pas adapter le ferrage du contenu en fonction de son type (comme les chiffres qui devraient être ferrés à droite).
Ce tableau possède des marges supérieures et inférieures.
Exemple d’un tableau par défaut normal dans un article
<div class="su-article">
<table>
<thead>
<tr>
<td> </td>
<th>Article</th>
<th>Quantité</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Croissant</td>
<td>5</td>
<td>0,90 €</td>
</tr>
<tr>
<th>2</th>
<td>Pain au chocolat</td>
<td>5</td>
<td>1,00 €</td>
</tr>
<tr>
<th>3</th>
<td>Pain aux raisins</td>
<td>2</td>
<td>1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total</th>
<td> – </td>
<td>12</td>
<td>11,50 €</td>
</tr>
</tfoot>
</table>
</div>
Exemple d’un tableau par défaut simpliste dans un article
Même si c’est déconseillé, il est possible de construire un tableau HTML basique sans l’enrichissement des <thead>, <tbody> et <tfoot>. Dans ce cas, vous perdrez certaines apparences spécifiques qu’un thème peut donner a des en-têtes de colonne…
<div class="su-article">
<table>
<tr>
<td> </td>
<th>Article</th>
<th>Quantité</th>
<th>Prix</th>
</tr>
<tr>
<th>1</th>
<td>Croissant</td>
<td>5</td>
<td>0,90 €</td>
</tr>
<tr>
<th>2</th>
<td>Pain au chocolat</td>
<td>5</td>
<td>1,00 €</td>
</tr>
<tr>
<th>3</th>
<td>Pain aux raisins</td>
<td>2</td>
<td>1,00 €</td>
</tr>
<tr>
<th>Total</th>
<td> – </td>
<td>12</td>
<td>11,50 €</td>
</tr>
</table>
</div>
Tableau mis en forme
Il s’agit du tableau avancé, qui permet plus de subtilités (tant au niveau apparence, qu’accessibilité) que le tableau par défaut.
Pour ce tableau où un intégrateur à la main sur son formatage, il faudra utiliser une structure avec <thead>, <tbody>, et <tfoot>, ainsi qu’une légende avec <caption>. En effet, ces éléments peuvent permettre une meilleure gestion de l’affichage via CSS, un meilleur référencement et une meilleure accessibilité.
Accessibilité
La balise <caption> permet de décrire brièvement le contenu du tableau. Cette indication peut être utile au lecteur voyant pour lui permettre d’avoir rapidement une idée sur le contenu du tableau, mais elle est indispensable aux mal voyants. Il leur est en effet beaucoup plus compliqué de comprendre le but du tableau proposé sans en avoir la vue d’ensemble. C’est pourquoi nous vous conseillons fortement d’utiliser cette balise avec un contenu pertinent. Si toutefois, vous ne voulez pas rendre cette légende de tableau visible pour les lecteurs voyants, il vous suffit de lui ajouter la classe su-visually-hidden issue des Helpers (classes d’aide).
En plus de cette balise, l’attribut scope (scope sur MDN) en l’ajoutant sur les balises <th>, améliore la lisibilité d’un tableau pour les lecteurs d’écran. Il permet de dire au lecteur d’écran si l’en-tête de tableau est un en-tête de colonne ou un en-tête de ligne.
Apparence
Plusieurs classes vous sont proposées pour styler votre tableau en fonction de vos besoins. Ces classes appliquent une apparence prédéfinie par le thème, si vous avez besoin d’un style non prévu par ces classes (ie : une couleur ou une largeur de bordure différente), il vous faudra ajouter vos propres CSS…
Ce tableau ne possède pas de marge.
N. B. – Certaines classes sont à positionner sur le <table>, d’autres sur des enfants (<tr>…).
Légende et alignements
Ci-dessous un exemple avec les règles d’accessibilité et les classes d’alignement de contenu. Pour la légende du tableau, elle est bien dans le code pour l’accessibilité (cf. plus haut), mais elle est invisible grâce à la classe su-visually-hidden. Pour l’alignement des valeurs numériques, on applique aussi la classe su-text-right sur les <th> et <td> pour aligner le contenu des colonnes de chiffres à droite, comme recommandé dans la présentation.
<table class="su-data-table">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Article</th>
<th scope="col" class="su-text-right">Quantité</th>
<th scope="col" class="su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Croissant</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Pain au chocolat</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Pain aux raisins</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td class="su-text-right">12</td>
<td class="su-text-right">11,50 €</td>
</tr>
</tfoot>
</table>
Sans cette classe su-visually-hidden la légende est bien visible :
<table class="su-data-table">
<caption >Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Article</th>
<th scope="col" class="su-text-right">Quantité</th>
<th scope="col" class="su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Croissant</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Pain au chocolat</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Pain aux raisins</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td class="su-text-right">12</td>
<td class="su-text-right">11,50 €</td>
</tr>
</tfoot>
</table>
Largeurs
Largeur du tableau
Il est possible de faire en sorte que le tableau fasse toute la largeur de son conteneur, tout le temps (avec la classe su-fullwidth sur le <table>), ou juste sur mobile (avec la classe su-fullwidth-mobile). Ici, le tableau est toujours en pleine largeur dans un conteneur de ⅔ de large (su-col-md-18).
<div class="su-row">
<div class="su-col-md-18">
<table class="su-data-table su-fullwidth">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Article</th>
<th scope="col" class="su-text-right">Quantité</th>
<th scope="col" class="su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Croissant</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Pain au chocolat</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Pain aux raisins</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td class="su-text-right">12</td>
<td class="su-text-right">11,50 €</td>
</tr>
</tfoot>
</table>
</div>
</div>
Largeur de colonnes
SipaUI propose aussi des largeurs de colonne en pourcentage par paliers de 5 % avec les classes su-table-col-width-x (où x est un multiple de 5 entre 5 et 95). Ces classes sont à mettre sur chaque cellules (<th> ou <td>) du premier rang.
<div class="su-row">
<div class="su-col-md-18">
<table class="su-data-table su-fullwidth">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td class="su-table-col-width-5"> </td>
<th scope="col" class="su-table-col-width-65">Article</th>
<th scope="col" class="su-table-col-width-15 su-text-right">Quantité</th>
<th scope="col" class="su-table-col-width-15 su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Croissant</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Pain au chocolat</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Pain aux raisins</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td class="su-text-right">12</td>
<td class="su-text-right">11,50 €</td>
</tr>
</tfoot>
</table>
</div>
</div>
Contours
Contours de tableau
Si vous avez besoin de mettre une bordure extérieure au tableau et que celle-ci est masquée en standard, ajoutez la classe su-table-outside-borders au <table>. Cela appliquera une bordure externe de la même apparence que les bordures internes sans avoir besoin de CSS supplémentaire. Toutefois, si cette bordure doit différer des bordures internes, là, vous aurez besoin de CSS en plus pour modifier son aspect. À l’inverse, une classe su-table-no-outside-borders existe pour supprimer la bordure extérieure d’un tableau quand celle existe en standard dans le thème.
<table class="su-data-table su-table-outside-borders">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Article</th>
<th scope="col" class="su-text-right">Quantité</th>
<th scope="col" class="su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Croissant</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Pain au chocolat</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Pain aux raisins</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td class="su-text-right">12</td>
<td class="su-text-right">11,50 €</td>
</tr>
</tfoot>
</table>
Il est aussi possible de supprimer juste la dernière bordure du tableau avec la classe su-no-ending-border :
<div class="sipaui">
<table class="su-data-table su-no-ending-border">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Article</th>
<th scope="col" class="su-text-right">Quantité</th>
<th scope="col" class="su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Croissant</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Pain au chocolat</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Pain aux raisins</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td class="su-text-right">12</td>
<td class="su-text-right">11,50 €</td>
</tr>
</tfoot>
</table>
</div>
Lignes séparatrices
De la même façon, on peut forcer l’affichage des bordures internes si celles-ci (ou une partie de celles-ci) sont masquées par défaut. Il suffit alors de positionner la classe su-table-inside-borders, su-table-vertical-inside-borders ou su-table-horizontal-inside-borders en plus de la classe su-table-outside-borders (il n’est pas possible de créer les bordures internes sans mettre de bordure externe). On peut aussi supprimer les bordures internes créées par défaut par le thème, avec les classes su-table-no-inside-borders, su-table-no-vertical-inside-borders ou su-table-no-horizontal-inside-borders.
Exemple avec la classe su-table-inside-borders :
<table class="su-data-table su-table-outside-borders su-table-inside-borders">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Article</th>
<th scope="col" class="su-text-right">Quantité</th>
<th scope="col" class="su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Croissant</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Pain au chocolat</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Pain aux raisins</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td class="su-text-right">12</td>
<td class="su-text-right">11,50 €</td>
</tr>
</tfoot>
</table>
Exemple avec les classes su-table-vertical-inside-borders pour ajouter des bordures de colonne et su-table-no-horizontal-inside-borders pour supprimer les bordures horizontales imposées par le thème Ouest-France :
<table class="su-data-table su-table-outside-borders su-table-vertical-inside-borders su-table-no-horizontal-inside-borders">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Article</th>
<th scope="col" class="su-text-right">Quantité</th>
<th scope="col" class="su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Croissant</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Pain au chocolat</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Pain aux raisins</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td class="su-text-right">12</td>
<td class="su-text-right">11,50 €</td>
</tr>
</tfoot>
</table>
Rangs paires
Avec la classe su-table-even-row il est possible d’ajouter un fond au rangs pairs (il s’agit des rangs dans le tbody, les rangs du thead ou du tfoot ne sont ni concernés ni comptabilisés).
<table class="su-data-table su-table-even-row">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Article</th>
<th scope="col" class="su-text-right">Quantité</th>
<th scope="col" class="su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Croissant</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Pain au chocolat</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Pain aux raisins</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Chausson au pommes</td>
<td class="su-text-right">1</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td class="su-text-right">13</td>
<td class="su-text-right">12,50 €</td>
</tr>
</tfoot>
</table>
Tableau avec fusions de cellules
Les options de fusion de cellules du HTML (colspan et rowspan) sont bien sûr disponibles.
Toutefois notez que :
Les technologies d’assistance telles que les lecteurs d’écran peuvent rencontrer des difficultés lors de l’analyse de tableaux complexes où les cellules d’en-tête ne sont pas associées aux données de façon clairement verticale ou horizontale. Généralement, cela se traduit par la présence des attributs colspan et rowspan. Si possible, on présentera le tableau différemment, en le divisant en plusieurs tableaux simples qui ne nécessitent pas l’utilisation des atttributs colspan et rowspan. En plus d’aider à la compréhension pour les personnes qui utilisent des outils d’assistance, cela pourra bénéficier aux personnes souffrant de troubles cognitifs.
Exemple de tableau avec colspan :
<table class="su-data-table">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">En-tête 1</th>
<th scope="col">En-tête 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Bla bla</td>
<td>Bli bli</td>
</tr>
<tr>
<th scope="row">2</th>
<td colspan="2"><strong>Cellules fusionnées horizontalement</strong></td>
</tr>
</tbody>
</table>
Exemple de tableau avec rowspan :
<table class="su-data-table">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">En-tête 1</th>
<th scope="col">En-tête 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td rowspan="2"><strong>Cellules fusionnées <br />
verticalement</strong></td>
<td>Bla bla</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bli bli</td>
</tr>
</tbody>
</table>
Tableau responsif
Les données en tableaux sont souvent des données riches qui risquent de ne pas tenir sur la largeur d’un écran de mobile. Pour offrir quand même ces informations aux « mobinautes » (qui sont souvent les lecteurs majoritaires d’un site éditorial) il faudra utiliser un tableau « responsif », c’est à dire qui s’adapte à la largeur de l’écran. Il y a alors 2 solutions possibles : afficher un tableau moins riche sur mobile en masquant certaines colonnes ou créer un tableau « glissant » qui permet de faire défiler le contenu dans la largeur. La 1re solution a l’avantage d’être la plus simple, pour le développeur comme pour le lecteur, et la 2de permet de ne pas priver le lecteur d’informations, mais en complexifiant l’intégration par le développeur et l’expérience utilisateur.
Tableau responsif par occultation
Pour ce tableau responsif, on ajoute la classe su-fullwidth-mobile sur la balise <table> afin que le tableau soit en pleine largeur sur mobile, et on ajoute les classes su-hidden-xs su-hidden-sm sur chaque <th> et <td> de la colonne que l’on veut masquer en mobile (ici, la colonne « Commentaire »). Ces dernières classes sont issues des Helpers (classes d’aide). Il en existe d’autres en fonction des largeurs d’écran…
N. B. – Dans cet exemple, la classe su-text-nowrap est utilisée pour empêcher les retours à la ligne automatiques dans la colonne « Article ».
<table class="su-data-table su-fullwidth-mobile">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Article</th>
<th scope="col" class="su-hidden-xs su-hidden-sm">Commentaire</th>
<th scope="col" class="su-text-right">Quantité</th>
<th scope="col" class="su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="su-text-nowrap">Croissant</td>
<td class="su-hidden-xs su-hidden-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="su-text-nowrap">Pain au chocolat</td>
<td class="su-hidden-xs su-hidden-sm">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="su-text-nowrap">Pain aux raisins</td>
<td class="su-hidden-xs su-hidden-sm">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td class="su-hidden-xs su-hidden-sm"> – </td>
<td class="su-text-right">12</td>
<td class="su-text-right">11,50 €</td>
</tr>
</tfoot>
</table>
Tableau responsif par glissement
Ce tableau responsif nécessite un <div> parent avec la classe su-responsive-data-table pour pouvoir gérer son glissement horizontal. Dans l’exemple ci-dessous une largeur minimale en px a été ajoutée à la colonne « Commentaire ».
<div class="su-responsive-data-table">
<table class="su-data-table">
<caption class="su-visually-hidden">Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Article</th>
<th scope="col" style="min-width: 300px">Commentaire</th>
<th scope="col" class="su-text-right">Quantité</th>
<th scope="col" class="su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="su-text-nowrap">Croissant</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td class="su-text-nowrap">Pain au chocolat</td>
<td>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td class="su-text-nowrap">Pain aux raisins</td>
<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td> – </td>
<td class="su-text-right">12</td>
<td class="su-text-right">11,50 €</td>
</tr>
</tfoot>
</table>
</div>
Tableau sur fond sombre
Il suffit de mettre la classe su-negative sur le tableau ou sur un parent.
<div style="background: DimGray; padding: 10px">
<table class="su-data-table su-negative">
<caption>Courses viennoiseries</caption>
<thead>
<tr>
<td> </td>
<th scope="col">Article</th>
<th scope="col" class="su-text-right">Quantité</th>
<th scope="col" class="su-text-right">Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Croissant</td>
<td class="su-text-right">5</td>
<td class="su-text-right">0,90 €</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Pain au chocolat</td>
<td class="su-text-right">5</td>
<td class="su-text-right">1,00 €</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Pain aux raisins</td>
<td class="su-text-right">2</td>
<td class="su-text-right">1,00 €</td>
</tr>
</tbody>
<tfoot>
<tr>
<th scope="row">Total</th>
<td> – </td>
<td class="su-text-right">12</td>
<td class="su-text-right">11,50 €</td>
</tr>
</tfoot>
</table>
</div>
Liste des classes disponibles
su-article(zone éditoriale d’un détail article)su-data-table(si besoin de surcharge)su-table-col-width-5su-table-col-width-10su-table-col-width-15- …
su-table-col-width-90su-table-col-width-95su-no-ending-bordersu-table-outside-borderssu-table-no-outside-borderssu-table-inside-borderssu-table-vertical-inside-borderssu-table-horizontal-inside-borderssu-table-no-inside-borderssu-table-no-vertical-inside-borderssu-table-no-horizontal-inside-borderssu-table-even-rowsu-responsive-data-table
Classes annexes
su-visually-hidden(dépendant des Helpers (classes d’aide))su-text-right(dépendant des Helpers (classes d’aide))su-text-center(dépendant des Helpers (classes d’aide))su-text-left(dépendant des Helpers (classes d’aide))su-text-justify(dépendant des Helpers (classes d’aide))su-fullwidth(dépendant des Helpers (classes d’aide))su-fullwidth-mobile(dépendant des Helpers (classes d’aide))su-hidden-xs(dépendant des Helpers (classes d’aide))su-hidden-sm(dépendant des Helpers (classes d’aide))- …
su-text-nowrap(dépendant des Helpers (classes d’aide))