Tableaux

Chantier

Cette page est en chantier.

Veuillez transmettre un problème ou soumettre une demande de tirage s'il manque des renseignements ou des codes ou si la synchronisation est incorrecte ou déphasée avec le principal référentiel (wet-boew/wet-boew).

Usage

Les utiliser pour organiser les données en rangées et en colonnes afin de créer des cellules de données.

Conception et codage

Utilisation de base

Défaut

Les utiliser pour appliquer un style de base (seulement les séparateurs horizontaux et le remplissage léger). Ajoutez le CSS de base .table à n'importe quelle balise de tableau <table>. Vu la grande popularité des tableaux pour d'autres plugiciels comme les calendriers et les sélecteurs de date, cette page énumère des styles de tableau personnalisés isolés.

Apparence
En-tête au-dessus du tableau
Exemple de tableau avec en-tête
En-tête En-tête
Données données Données données
Données données Données données
Cellules vides dans un tableau
Exemple de tableau avec des cellules de données invisibles
En-tête En-tête
- Données données
Données données -
Légende du tableau
En-tête En-tête En-tête
Données données Données données Données données
Bonne utilisation

Points de conformité :

  • Utilisez des tableaux pour afficher des données tabulaires comme des renseignements financiers, statistiques, comparatifs ou numériques
  • Utilisez .table pour appliquer un style de tableau de base
  • Utilisez du texte d'en-tête uniforme dans les tableaux liés
    • Par exemple, utilisez l'en-tête « Nom » pour la liste de toutes les personnes-ressources, et non divers titres comme « Personnes-ressources », « Nom » ou « Utilisateur »
  • Insérez un trait d'union (-) dans les cellules de données vides
    • Le trait d'union (-) permet au lecteur d'écran de lire correctement le contenu comme étant « vide », et il s'affiche correctement lorsqu'il est grossi
  • Incluez l'élément approprié scope="col" ou scope="row" dans la balise <th>
  • Insérez une balise de titre descriptive <h*>directement au-dessus d'un tableau lorsque celui-ci ne comporte pas de balise <caption>
  • Incluez une tableau légende visible lorsque le titre de <h*> ne se trouve pas directement au-dessus du tableau, ou si plusieurs tableaux apparaissent en-dessous d'une balise <h*>
    • Utilisez une balise <caption> sur toutes les tableaux afin qu'ils valident et, en plus d'être accessible et descriptif (surtout dans des pages statistiques ou financières qui comportent plusieurs tableaux)
    • Utilisez .wb-inv (au besoin) pour rendre invisible la légende du tableau, tout en assurant cependant l'accessibilité
  • Comprenez et mettez en œuvre les principes à l'appui connexes
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
  • N'utilisez pas les tableaux à des fins de mise en page
  • N'utilisez pas title="" à l'intérieur de la balise <table>
  • À l'intérieur d'un tableau, n'inscrivez pas S.O. ou &nbsp; ne laissez pas non plus de cellules vides
    • Ceci empêchera les problèmes liés aux lecteurs d'écran
  • Évitez les cellules fusionnées, puisqu'elles sont complexes à coder et qu'elles présentent des problèmes d'accessibilité
Code
// En-tête au-dessus d'un tableau :
<h*>...</h*>
<table class="table">
<caption class="wb-inv">Texte de la légende</caption>
  <thead>
   <tr>
     <th scope="col">...</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>...</td>
   <tr>
  </tbody>
</table>

// Cellules vides dans un tableau:
<table class="table">
<caption class="wb-inv">c</caption>
<thead>
    <tr>
     <th scope="col">...</th>
     <th scope="col">...</th>
    </tr>
  </thead>
  <tbody>
   <tr>
    <td>-</td>
    <td>-</td>
   <tr>
  </tbody>
</table>

// Légende du tableau :
<table class="table">
  <caption>Texte de la légende</caption>
    <thead>...</thead>
    <tbody>...</tbody>
</table>

Utilisation avancée

Modifier la largeur des colonnes et des tableaux

Utilisez le CSS de grille pour modifier la largeur des colonnes.

Apparence
Exemple de tableau avec des colonnes et une largeur modifiées
En-tête En-tête
Données données données Données données
Données données Données données
Données données Données données
Données données Données données
Bonne utilisation

Points de conformité :

  • Assurez-vous que la largeur du tableau <table> dans son ensemble, ainsi que celle de chaque colonne <th>, conviennent au contenu
    • Les tableaux qui ont trop d'espaces blancs (trop grande séparation) ou trop peu d'espaces blancs (entassement) sont difficiles à lire
  • Insérez la balise <table> dans un conteneur approprié pour limiter la taille globale du tableau
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cette composante d'une façon qui entre en conflit avec les points de conformité précédent(s)
  • N'appliquez pas la même largeur à tous les tableaux d'une page simplement pour des raisons de conception
Code
// Tableau avec une colonne limitée et une largeur globale
<div class="col-md-3">
 <table class="table">
 <caption class="wb-inv">Texte de la légende</caption>
   <thead>
   <tr>
      <th scope="col" class="col-sm-8">...</th>
      <th scope="col" class="col-sm-4">...</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>...</td>
     <td>...</td>
    </tr>
   </tbody>
 </table>
</div>

Rangées rayées (Zébrures)

Les utiliser pour ajouter des rayages du zèbre à n'importe quelle rangée d'un tableau.

Apparence
Exemple de tableau avec des rayages du zèbre
En-tête En-tête
Données données Données données
Données données Données données
Données données Données données
Données données Données données
Bonne utilisation

Points de conformité :

  • Utilisez .table-striped dans <tbody> pour mieux distinguer les rangées les unes des autres
  • L'utiliser principalement dans les tableaux longs et complexes
Mauvaise utilisation

Points de conformité :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code

<table class="table table-striped">
<caption class="wb-inv">Texte de la légende</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Rangées à pointage

Les utiliser pour ajouter un effet de pointage appliquant des zébrures à n'importe quelle rangée d'un tableau à l'intérieur de <tbody>.

Apparence
Exemple de tableau avec rangées à pointage
En-tête En-tête
Données données Données données
Données données Données données
Données données Données données
Données données Données données
Bonne utilisation

Point d'observation :

  • Utilisez .table-hover pour permettre à l'utilisateur de mettre chaque rangée en surbrillance lorsqu'il fait glisser son curseur au-dessus
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code

<table class="table table-hover">
<caption class="wb-inv">Texte de la légende</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Rangées à bordure

Les utiliser pour ajouter des bordures au tableau.

Apparence
Exemple de tableau avec des rangées à bordure
En-tête En-tête
Données données Données données
Données données Données données
Données données Données données
Données données Données données
Bonne utilisation

Points de conformité :

  • Utilisez .table-bordered pour séparer des renseignements lorsque les cellules d'un tableau comprennent beaucoup de données, et utilisez le retour automatique à la ligne
    • Cela permet à l'utilisateur d'associer facilement les renseignements aux cellules
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points de conformité précédents
Code

<table class="table table-bordered">
<caption class="wb-inv">Texte de la légende</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

↧ ↥ Rangées condensées

Les utiliser pour réduire le remplissage dans le tableau.

Apparence
Exemple de tableau avec des rangées condensées
En-tête En-tête
Données données Données données
Données données Données données
Données données Données données
Données données Données données
Bonne utilisation

Point d'observation :

  • Utilisez .table-condensed pour rétrécir la hauteur des rangées
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code

<table class="table table-condensed">
<caption class="wb-inv">Texte de la légende</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

Tableaux réactifs

Créez des tableaux réactifs pour permettre le défilement horizontal de tableaux sur les petits appareils (d'une largeur de moins de 768 px). Lorsque la largeur est supérieure à 768 px, il n'y a aucune différence visuelle dans ces tableaux.

Apparence
Exemple de tableau avec conception réactive
En-tête En-tête En-tête En-tête En-tête En-tête En-tête
Données données Données données Données données Données données Données données Données données Données données
Données données Données données Données données Données données Données données Données données Données données
Données données Données données Données données Données données Données données Données données Données données
Bonne utilisation

Points de conformité :

  • Faites envelopper .table dans .table-responsive lorsque le tableau est large et nécessite un défilement horizontal sur les appareils mobiles
  • Divisez les tableaux volumineux en tableaux plus petits pour rendre le contenu plus convivial
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
<div class="table-responsive">
<table class="table">
 <caption class="wb-inv">Texte de la légende</caption>
    <thead>...</thead>
    <tbody>...</tbody>
  </table>
</div>

Rangées et cellules colorées

Utilisez les classes contextuelles pour colorer des rangées de tableau ou des cellules individuelles.

Apparence
Exemple de tableau avec de la couleur
En-tête En-tête
Données données Données données
Données données Données
Données données Données données
Données données Données
Données données Données données
Données données Données
Données données Données données
Données données Données
Bonne utilisation

Points de conformité :

  • .active: Applique la couleur sélectionnée par pointage à une rangée ou une cellule en particulier
  • .success: Indique une action réussie ou positive
  • .warning: Indique un avertissement qui pourrait exiger une attention particulière
  • .danger: Indique une action dangereuse ou possiblement négative
Mauvaise utilisation

Point d'observation :

  • N'utilisez pas cet élément d'une façon qui entre en conflit avec les points d'observation précédents
Code
//Dans des rangées :
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>

//Dans des cellules de données ou d'en-tête (« td ») ou (« th ») :
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
</tr>

Fonctions complémentaires

Des caractéristiques et des comportements complémentaires sont disponibles.

Principes à l'appui

Une partie du code et des documents pour cette page est tirée de Bootstrap (lien externe).

Date de modification :