Sélection de la langue

Gouvernement du Canada / Government of Canada

Recherche

Tableaux: Système de conception de Canada.ca

  • Dernière modification : 2021-05-21

Les tableaux de données vous permettent de communiquer des données de façon efficace à l’aide de rangées et de colonnes.

Sur cette page

Quand utiliser cette configuration

Quoi éviter

Comment mettre en oeuvre

Vous pouvez utiliser soit la version Bêta , soit la version stable de cette configuration de conception. Les tableaux Bêta utilisent du CSS provisoire pour rendre les tableaux adaptatifs sur les petits écrans.

La version Bêta remplacera éventuellement la version stable.

Tableaux de données Bêta (adaptatifs)

Les tableaux adaptatifs Bêta sont :

  • supportés uniquement pour les tableaux simples qui n'ont pas de colonnes ou de rangées combinées
  • non pris en charge par IE 11

Les tableaux adaptatifs créent des cartes pour les vues d'appareil mobile et de petite tablette.

Comme il s'agit encore d'une version bêta, assurez-vous de tester vos tableaux dans différentes grandeur d'écran, surtout si vous ajoutez beaucoup de personnalisation.

Code 
<table class="provisional gc-table table" id="myTable1">
<caption>Croissance de la population dans les villes canadiennes</caption>
 <thead>
  <tr>
   <th>City</th>
   <th>Population en 2007</th>
   <th>Population en 2017</th>
   <th>Variation en pourcentage</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td data-label="Ville">Toronto</td>
   <td data-label="Population en 2007">5 418 207</td>
   <td data-label="Population en 2017">6 346 088</td>
   <td data-label="Variation en pourcentage">17,1%</td>
  </tr>
  <tr>
   <td data-label="Ville">Montréal</td>
   <td data-label="Population en 2007">3 714 846</td>
   <td data-label="Population en 2017">4 138 254</td>
   <td data-label="Variation en pourcentage">11,4%</td>
  </tr>
  <tr>
   <td data-label="Ville">Vancouver</td>
   <td data-label="Population en 2007">2 218 134</td>
   <td data-label="Population en 2017">2 571 262</td>
   <td data-label="Variation en pourcentage">15,9%</td>
  </tr>
  <tr>
   <td data-label="Ville">Ottawa–Gatineau</td>
   <td data-label="Population en 2007">1 188 073</td>
   <td data-label="Population en 2017">1 377 016 </td>
   <td data-label="Variation en pourcentage">15,9%</td>
  </tr>
 </tbody>
</table>

Modification des tableaux

Option Description Comment mettre en oeuvre
Bordures Ajoute une bordure pour aider à séparer visuellement les cellules du tableau lorsqu'elles ont beaucoup de contenu. Ajouter la classe table-bordered au tableau ( <table> )
Espace condensé Réduit la hauteur des cellules du tableau Ajouter la classe table-condensed au tableau ( <table> )
Rangées rayées Alterne la couleur des rangées du tableau du blanc au gris. Ajouter la classe table-striped au tableau ( <table> )
Rangées mises en valeur au pointage Assombrit l'arrière-plan lorsque la souris survole une une rangée. Ajouter la classe table-hover au tableau ( <table> )
Aligné à gauche Aligner le texte dans n'importe quelle cellule sur les cartes mobiles Ajouter la classe text-left à l'élément HTML à l'intérieur du <td> que vous voulez aligner à gauche, tel qu'un <span> ou un <ul>
Filtre simple Ajouter un filtre simple à un tableau Ajouter la classe wb-filter au tableau ( <table> )
Activer le plugiciel DataTables Permet la recherche, le tri, le filtrage, la pagination, etc. Documentation du plugiciel DataTables Ajouter la classe wb-tables au tableau ( <table> ) et ajouter les valeurs appropriées à data-wb-tables=""
Tableaux de données stables
  • Servez-vous des catégories de présentation définies pour les tableaux dans la BOEW .
  • Veillez à ce que chaque colonne ne présente qu’une facette de données.
  • Dans la mesure du possible, utilisez les tableaux de la version 4 de la BOEW qui comprennent des mécanismes de tri et de filtrage.
    • Cette façon de procéder est recommandée lorsqu’un tableau compte plus de 12 rangées.
  • Ajoutez des commandes de pagination facultatives pour les tableaux comptant plus de 12 rangées.
  • Ne présentez jamais des données tabulaires sous forme d’images.

Exemple concret

Exemple

Modèle de table de données
Capture d’écran illustrant le modèle de table de données dans le site Canada.ca. Plus de détails au sujet de ce graphique se retrouvent dans le texte entourant l’image.

Recherche et blogue

Nous avons testé l'utilisation de tableaux adaptatifs avec succès lors de projets d'optimisation avec Santé Canada pour les rappels, avec l' ARC pour l'organisation des coordonnées, et pour divers contenus liés à la COVID-19. Les tableaux adaptatifs facilitent l'utilisation par les utilisateurs de petits écrans sans qu'ils aient à faire défiler l'écran sur le côté pour voir tout le contenu.

Derniers changements

Mise à jour pour inclure le code provisoire pour les cartes adaptatives

Détails de la page

Date de modification :