Aller au contenu
SkillCodex
Menu

Table

Tableau

Une structure tabulaire non interactive qui relie des données statiques par des lignes, des colonnes et leurs en-têtes.

Essayer le composant
Repères, sources et actions
Sources et révision
Mis à jour le
Version
v1.0.26 · r1
Sources
5 sources
Statut
Publié
Consulter les sources

Tu as peut-être cherché : comparer des valeurs en lignes et en colonnesafficher un comparatif de prix statiquealigner des enregistrements sous des en-têtes de colonne

Toutes les formulations
Enregistrer et partager

Reconnaître

Structurer et explorer des données

Essayer

Faut-il lire des données tabulaires, interagir cellule par cellule ou développer une hiérarchie ?

Tableau

Contexte commun aux essais

Un espace de travail présente un grand ensemble d’informations dont la structure et le modèle d’interaction déterminent comment les personnes le parcourent, le modifient ou le développent.

Tableau

Mission

Tableau

Trie Nom par ordre croissant puis décroissant en confirmant que le focus et le contexte des en-têtes restent intacts.

Métriques des versions candidates
ÉtatResponsable
BeaconÀ vérifierLéo
AtlasPrêtAmina
CometBrouillonMarta

Résultat de l’essai

Le tableau suit l’ordre source ; ses cellules restent dans l’ordre de lecture du document.

Étape 1 sur 3

Essayer

Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.

Comportement et cas limite
À observer
L’ordre source est affiché avec une légende et des en-têtes à portée correcte.
Cas limite
Les longues valeurs utilisent un débordement horizontal sans convertir les lignes en cartes inaccessibles ni casser les associations d’en-tête.

Ce que cet essai montre

Le tableau se lit comme du contenu documentaire et ne gère pas le focus de ses cellules ; la grille de données est un widget composite parcouru avec les flèches, tandis que la vue arborescente organise des nœuds hiérarchiques.

Lequel convient à ton besoin ?

Tableau

Il faut comparer des valeurs entre lignes et colonnes

Grille de données

Un grand jeu tabulaire exige une navigation clavier efficace

Quel composant utilises-tu ici ?
Différence et sources

Le tableau se lit comme du contenu documentaire et ne gère pas le focus de ses cellules ; la grille de données est un widget composite parcouru avec les flèches, tandis que la vue arborescente organise des nœuds hiérarchiques.

Consulter les sources

    Parties du spécimen

    Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.

    Tableau

    Le conteneur tabulaire qui préserve les relations entre lignes et colonnes.

    Position dans l’atlas

    Carte relationnelle

    Repère le chapitre, les concepts proches et la prochaine décision utile.

    • Chapitre

      Structurer et explorer des données

      Tableau appartient à ce groupe de concepts comparés.

    • Ne pas confondre

      Grille de données

      Choisis Tableau si les données se lisent et se comparent sans interaction dans les cellules. Choisis Grille de données si l’utilisateur édite, sélectionne ou parcourt beaucoup de cellules au clavier.

      Comparer cette paire
    • Ne pas confondre

      Vue arborescente

      Choisis Tableau si l’utilisateur compare des valeurs entre lignes et colonnes sans structure parent-enfant. Choisis Vue arborescente si les éléments ont des parents et que l’utilisateur descend de niveau en niveau.

      Comparer cette paire
    • Prochaine étape

      Compare les concepts du chapitre avant de retenir une implémentation.

      Ouvrir le chapitre

    Avec tes mots

    Comprendre

    Ce que les gens décrivent

    Alias documentés : tableau de données, données tabulaires, tableau comparatif

    • comparer des valeurs en lignes et en colonnes
    • afficher un comparatif de prix statique
    • aligner des enregistrements sous des en-têtes de colonne
    • une matrice lisible sans navigation cellule par cellule
    • résumer les chiffres mensuels par catégorie
    • trier une colonne sans transformer chaque cellule en widget

    Choisir

    À utiliser quand

    • Il faut comparer des valeurs entre lignes et colonnes
    • Les données sont surtout lues plutôt que manipulées cellule par cellule

    À éviter quand

    • Il faut un focus, une édition ou une sélection type feuille de calcul
    • La structure sert seulement à la mise en page

    Comparer

    Comparer les concepts proches

    Checklist de vérification

    Essaie ces gestes dans le lab, puis vérifie les mêmes comportements dans le résultat de ton agent. Adapte les noms d’exemple à ton interface.

    1. 1. À faire

      Lis une valeur au milieu du tableau et identifie sa colonne ainsi que le contexte de sa ligne.

      Résultat attendu

      Le titre et les en-têtes du tableau permettent de comprendre la valeur, y compris avec une aide technique.

    2. 2. À faire

      Si le tri est proposé, active deux fois le bouton de tri de la même colonne.

      Résultat attendu

      Les lignes suivent l’ordre croissant puis décroissant annoncé, et le focus reste sur le bouton de tri.

    3. 3. À faire

      Parcours le tableau avec Tab et examine-le dans une fenêtre étroite.

      Résultat attendu

      Seuls les vrais liens ou commandes reçoivent le focus, pas les cellules statiques. Le débordement reste utilisable sans perdre le lien avec les en-têtes.

    Contrat complet
    1. 1Utiliser un tableau natif si possible
    2. 2Fournir une légende ou un nom équivalent
    3. 3Délimiter correctement les relations d’en-tête
    4. 4Garder les cellules statiques hors de Tab
    5. 5Placer le tri dans un vrai bouton et mettre aria-sort à jour

    Comprendre → Reconnaître → Choisir → Comparer

    Pack pour ton agent

    Instructions pré-écrites à coller dans ton agent. Copier n’exécute rien.

    Implémenter correctement

    Construis Tableau sans casser son comportement

    # Implémenter Tableau dans ton agent
    
    ## Objectif
    Implémente Tableau pour ce comportement vérifié : Une structure tabulaire non interactive qui relie des données statiques par des lignes, des colonnes et leurs en-têtes.
    
    ## Prérequis
    - Inspecte d’abord le dépôt, le design system et les tests existants.
    - Préserve les changements sans rapport et borne les fichiers modifiés.
    - Confirme que Tableau répond au besoin avant de coder.
    
    ## Comportement requis
    - Les en-têtes natifs de ligne et de colonne donnent son contexte à chaque cellule sans focus de widget géré.
    - L’activation au pointeur, avec Entrée ou Espace, exécute une action nommée une seule fois.
    
    ## États à couvrir
    - Non trié
    - Trié par ordre croissant
    - Trié par ordre décroissant
    
    ## Accessibilité
    - Rôle ARIA : table > (thead | tbody) > tr > (th | td)
    - Le contrôle principal ou la région nommée pour Tableau possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    - Le focus reste sur le bouton de tri activé quand les lignes se réordonnent ; les cellules de lecture ne reçoivent jamais de focus de widget géré.
    - Un tableau appartient au contenu du document et ne se ferme pas.
    - La légende nomme le tableau, les en-têtes à portée donnent son contexte à chaque cellule et aria-sort expose le sens du tri actif.
    - Les cellules n’entrent pas dans l’ordre de tabulation
    - Tab atteint seulement les contrôles ou liens du tableau
    - Entrée ou Espace active un bouton de tri focalisé
    
    ## Quand ne pas utiliser
    - Il faut un focus, une édition ou une sélection type feuille de calcul
    - La structure sert seulement à la mise en page
    
    ## Critères d’acceptation
    - Utiliser un tableau natif si possible
    - Fournir une légende ou un nom équivalent
    - Délimiter correctement les relations d’en-tête
    - Garder les cellules statiques hors de Tab
    - Placer le tri dans un vrai bouton et mettre aria-sort à jour
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le besoin est relié au comportement canonique avant toute décision technique.
    • Les états, l’accessibilité et les non-objectifs empêchent une implémentation seulement visuelle.
    • Les critères d’acceptation et le format de sortie rendent la vérification observable.

    À essayer ensuite

    Vérifie Tableau sur un parcours réel

    # Vérifier Tableau après l’implémentation
    
    ## Objectif
    Audite l’implémentation de Tableau au regard de son comportement, de ses états et de ses exigences d’accessibilité sans la modifier automatiquement.
    
    ## Contrôles
    - Rejoue le plus petit parcours représentatif.
    - Contrôle le clavier, le focus, le nom accessible et les annonces.
    - Relie chaque écart à un critère d’acceptation précis.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:87d02721ca59dfb6129ba6fc92da8ce012a2b94924451fd86280b6289dc9c06d

    Diagnostiquer un problème

    Trouve et corrige le défaut de Tableau

    # Déboguer Tableau dans ton agent
    
    ## Symptôme observé
    [DÉCRIS ICI LE SYMPTÔME]
    
    ## Contrôles observables
    - Reproduis le problème avec le plus petit parcours pertinent.
    - Compare le comportement aux états et transitions documentés de Tableau.
    - Vérifie le clavier, le focus, le nom accessible et les annonces.
    
    ## Causes possibles
    - La primitive employée ne correspond pas au comportement attendu.
    - Un état, une transition ou un retour de focus manque.
    - Le composant voisin capture un événement ou masque un signal accessible.
    
    ## Corrections bornées
    - Corrige la cause reproduite sans recréer les composants voisins.
    - Conserve le contrat public et ajoute un test ciblé de non-régression.
    - N’installe aucune dépendance et ne modifie aucun état distant sans autorisation.
    
    ## Vérification finale
    - Utiliser un tableau natif si possible
    - Fournir une légende ou un nom équivalent
    - Délimiter correctement les relations d’en-tête
    - Garder les cellules statiques hors de Tab
    - Placer le tri dans un vrai bouton et mettre aria-sort à jour
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    
    • Web platform
    • Prérequis · Accès au dépôt, au design system et aux tests
    Pourquoi ça marche
    • Le symptôme explicite évite de partir d’une correction supposée.
    • Les contrôles séparent comportement, accessibilité et interférences voisines.
    • La correction reste bornée et doit produire une preuve de non-régression.

    À essayer ensuite

    Verrouille la correction de Tableau

    # Empêcher la régression de Tableau
    
    ## Objectif
    Transforme la cause reproduite en test de non-régression ciblé et compare Tableau aux concepts voisins avant d’élargir la correction.
    
    ## Contrôles
    - Prouve que le test échoue avant la correction.
    - Prouve qu’il passe après la correction bornée.
    - Vérifie qu’aucun composant voisin n’a changé de comportement.
    
    ## Garde-fous
    - Montre d’abord les changements envisagés avant toute action externe.
    - Ne publie, n’envoie, ne supprime, ne paie et ne modifie aucun état distant sans autorisation explicite.
    - Préserve les changements sans rapport et arrête-toi si le périmètre devient ambigu.
    
    ## Format de sortie
    - Résultat obtenu ou verdict.
    - Fichiers ou actions concernés.
    - Vérifications exécutées et preuves observables.
    - Blocages ou limites restantes.
    

    sha256:18f5dc1ea351c6a55c6759622aaf09d7b721b22eed53ee6cbf2b5fc5d3377a60

    Fiche complète, enregistrement et provenance

    Instruction pré-écrite par SkillCodex — ta demande n’est ni envoyée ni utilisée pour adapter ce texte ; aucun contenu n’est généré et copier n’exécute rien.

    Digest du Pack: sha256:742701affe303e8b06b59eb6c22340ebe5c379a79e3c0052a4180db4d5e8f7fe

    Dans le code

    TechnologiePrimitiveVersionLimite
    Web platform

    table with caption, th[scope], and td

    NatifPréférer table, caption et en-têtes à portée native. Les contrôles de tri restent des boutons ordinaires ; ne pas ajouter le focus d’une grille.

    Détails techniques

    Comportements

    • Lire les relations d’en-tête

      Les en-têtes natifs de ligne et de colonne donnent son contexte à chaque cellule sans focus de widget géré.

    • Exécuter une action

      L'activation au pointeur, avec Entrée ou Espace, exécute une action nommée une seule fois.

    États

    • Non trié

      Non trié

    • Trié par ordre croissant

      Trié par ordre croissant

    • Trié par ordre décroissant

      Trié par ordre décroissant

    Transitions d’état

    • Non trié → Trié par ordre croissant

      Activer le bouton de l’en-tête Nom trie de A à Z et définit aria-sort=ascending.

    • Trié par ordre croissant → Trié par ordre décroissant

      Activer de nouveau le bouton Nom trie de Z à A et définit aria-sort=descending.

    • Trié par ordre décroissant → Non trié

      Réinitialiser restaure l’ordre source et retire le sens de tri actif.

    Scénarios de test

    Contexte
    Un tableau de métriques compare trois projets par nom, état et responsable.
    Mission
    Trie Nom par ordre croissant puis décroissant en confirmant que le focus et le contexte des en-têtes restent intacts.
    État principal
    L’ordre source est affiché avec une légende et des en-têtes à portée correcte.
    Cas limite
    Les longues valeurs utilisent un débordement horizontal sans convertir les lignes en cartes inaccessibles ni casser les associations d’en-tête.

    Signaux visuels

    • Une légende nomme le jeu de données
    • Les cellules d’en-tête définissent lignes ou colonnes
    • Les cellules de données s’alignent aux intersections

    Signaux comportementaux

    • Les technologies d’assistance suivent les relations d’en-tête
    • Les cellules statiques ne reçoivent pas de focus géré
    • Les boutons de tri facultatifs réordonnent les lignes et mettent aria-sort à jour

    Accessibilité

    Rôle
    table > (thead | tbody) > tr > (th | td)
    Nom accessible
    Le contrôle principal ou la région nommée pour Tableau possède un nom accessible stable issu d’un texte visible ou d’un libellé programmatique explicite ; le placeholder et l’infobulle ne servent pas de nom.
    Focus clavier
    Le focus reste sur le bouton de tri activé quand les lignes se réordonnent ; les cellules de lecture ne reçoivent jamais de focus de widget géré.
    Fermeture
    Un tableau appartient au contenu du document et ne se ferme pas.
    Défilement
    Les débordements horizontal et vertical préservent les relations avec les en-têtes, la position de lecture active et le focus clavier visible sans réordonner les données.
    Annonce
    La légende nomme le tableau, les en-têtes à portée donnent son contexte à chaque cellule et aria-sort expose le sens du tri actif.
    Clavier
    • Les cellules n’entrent pas dans l’ordre de tabulation
    • Tab atteint seulement les contrôles ou liens du tableau
    • Entrée ou Espace active un bouton de tri focalisé

    Implémentations

    Ouvrir la matrice HTML, ARIA, Radix et shadcn
    • table with caption, th[scope], and td

      implementationKind
      native
      nativeElement
      table with caption, th[scope], and td
      ariaPattern
      native table
      radixPrimitive
      Non applicable
      shadcnRecipe
      Non applicable
      runtimeDependency
      Non applicable
      packageName
      Non applicable
      exportName
      Non applicable
      exactVersion
      Non applicable
      status
      verified
      sourceId
      source-ui-html-table
      deprecationStatus
      active
      replacement
      Non applicable
      validFrom
      Non applicable
      validUntil
      Non applicable

      Limite d’équivalence : Préférer table, caption et en-têtes à portée native. Les contrôles de tri restent des boutons ordinaires ; ne pas ajouter le focus d’une grille.

      Vérifier la source du binding

    Sources

    • WHATWG HTML: The table element
      sourceId
      source-ui-html-table
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/tables.html#the-table-element
      publisher
      WHATWG
      sourceRevision
      http-etag:"6a5dd5e8-3e386"
      consultedAt
      2026-08-10
      license
      Non indiquée
      contentDigest
      sha256:1e4082e281583eaed81a98a10ef718dbaa5815f5bc266341ac169065289104f2
      status
      verified

      Affirmation couverte : Tableau : sémantique native normative, états, attributs et comportement du navigateur pour table, caption, thead, tbody, tr, th, and td.

    • WAI-ARIA APG: Table Pattern
      sourceId
      source-ui-aria-table
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/ARIA/apg/patterns/table/
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-08-07T07:06:02Z
      consultedAt
      2026-08-10
      license
      Non indiquée
      contentDigest
      sha256:0e9efee89d5ad72b1d45a8c1c9a62235a7af80ab25aa1a8e159aa9626b1d713b
      status
      verified

      Affirmation couverte : Tableau : guide APG informatif pour le modèle tableau : rôles, états, relations et interactions au clavier.

    • WAI-ARIA 1.2: Roles Model
      sourceId
      source-ui-wai-aria-roles
      kind
      standard
      canonicalUrl
      https://www.w3.org/TR/wai-aria-1.2/#roles
      publisher
      W3C WAI
      sourceRevision
      W3C-REC-wai-aria-1.2-20230606
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:c0fea16fc747779569ab754d2d25bca3e2b7e8a673b8ef5362aeb9ebc73a4849
      status
      verified

      Affirmation couverte : Tableau : définitions normatives des rôles ARIA et contraintes du rôle accessible indiqué.

    • WHATWG HTML: The button element
      sourceId
      source-ui-html-button
      kind
      standard
      canonicalUrl
      https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element
      publisher
      WHATWG
      sourceRevision
      http-last-modified:2026-07-19T13:52:46Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:418a8f9ce1e8690c6d458121120b0b3b7cd907aa92b2101b85f82f7e02d5ac2f
      status
      verified

      Affirmation couverte : Tableau : sémantique native normative, états, attributs et comportement du navigateur pour button.

    • WCAG 2.2: Focus Appearance
      sourceId
      source-ui-wcag-understanding-focus-appearance
      kind
      documentation
      canonicalUrl
      https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance.html
      publisher
      W3C WAI
      sourceRevision
      http-last-modified:2026-07-02T10:07:49Z
      consultedAt
      2026-07-19
      license
      Non indiquée
      contentDigest
      sha256:fdcf316a1f0e3cc758eda9618322d132862124ff0a3f3b1a3acbf20daf804ff0
      status
      verified

      Affirmation couverte : Tableau : guide WCAG informatif pour évaluer l'apparence visible du focus clavier.