Structurer les Tableaux HTML pour une Meilleure Accessibilité

Réaliser un tableau sémantique
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Cours HTML5 et CSS3 / Part 1
Revoir le teaser Je m'abonne
5,0
Transcription

39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
5,0
39,90€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

À la fin de cette vidéo, vous serez capable de structurer un tableau HTML en utilisant les balises thead, thbody et thfoot, et de comprendre l’importance de cette structure pour l’accessibilité.

Apprenez à structurer vos tableaux HTML en utilisant les balises thead, thbody et thfoot pour une meilleure accessibilité et organisation.

Dans cette leçon, nous explorons une nouvelle manière de structurer les tableaux en HTML en utilisant les balises thead, thbody et thfoot. Cette méthode permet de mieux différencier les zones d'entête, de contenu et de pieds de tableau, rendant le tableau plus accessible et organisé. Nous commencerons par créer un tableau avec des catégories d'aliments et leurs prix ainsi que poids. Nous verrons comment intégrer ces nouvelles balises pour structurer le tableau de manière optimale. Cette approche est particulièrement utile lorsque le tableau comporte des totaux ou des résultats finaux, comme dans un rapport financier ou un inventaire. En utilisant thead pour l'entête, thbody pour le contenu et thfoot pour le pied, nous garantissons que le tableau est non seulement bien organisé mais aussi accessible pour les lecteurs d'écran et autres technologies d'assistance.

Cette structure améliore également l’expérience utilisateur en aidant à séparer clairement les différentes sections du tableau, ce qui peut être crucial lorsqu'il s'agit de grandes quantités de données. Finalement, nous vérifierons le rendu de notre tableau dans un navigateur pour s'assurer que tout est correctement présenté.

Voir plus
Questions réponses
Pourquoi est-il important de structurer un tableau avec thead, thbody et thfoot ?
Structurer un tableau avec ces balises améliore l'accessibilité et la clarté en séparant clairement les zones d'entête, de contenu et de pied.
Quelles sont les données typiques que l'on peut trouver dans le pied d'un tableau ?
Le pied d'un tableau contient généralement des totaux ou des résultats finaux, comme les totaux financiers ou les sommes d’inventaire.
Comment ces balises améliorent-elles l'accessibilité du tableau ?
Ces balises aident les technologies d'assistance à lire et naviguer dans le tableau de manière logique, ce qui est crucial pour les utilisateurs malvoyants.
Le tableau que nous allons réaliser maintenant diffère dans sa structure des tableaux que nous avons utilisés jusqu'à présent. C'est une autre manière de faire tout simplement. Il s'agit en fait de le rendre un peu plus accessible pour bien séparer le zone d'entête, la zone de contenu et la zone de pied. Libre à vous de l'utiliser ou pas. Dans le cas que nous allons aborder, c'est assez intéressant parce qu'en fait nous avons ici un tableau qui a une zone supérieure qu'on va appeler entête et une zone en bas que l'on peut vraiment nommer pied. Dans les tableaux que nous avons réalisés jusqu'à présent, en fait, il n'y avait pas de pied puisque c'était des données et puis il n'y avait pas de résultats particuliers. Il n'y avait pas un total. Donc là, ça peut être intéressant d'utiliser, c'est peut-être intéressant d'utiliser également pour l'accessibilité. Il est intéressant de l'étudier parce qu'il a une structure un petit peu particulière. Pour l'instant, j'ai commencé tableau, le tab, border, le caption, mes courses et puis nous allons commencer tout simplement par incorporer une balise tr telle que nous l'incorporons habituellement pour faire une première rangée. Donc je vais écrire un td ou un th plutôt, aliment. Ensuite, un autre th pour prix et enfin un troisième th pour poids. Ça, c'est ma première ligne, on va tout de suite attaquer la seconde ligne avec le poisson tr et là, il s'agit en fait de td tout simplement. Poisson, je vais mettre entre th plutôt. Donc 20 et puis 500, je vais copier-coller. Ensuite, là, il s'agit de la viande, 15 et ensuite, on a la totale, 35 euros et 1400 grammes. Alors, la structure que je vous propose, c'est une structure qui va utiliser trois nouvelles balises qui s'appellent thead, thbody et thfoot. De cette manière, il semble très facile de les utiliser puisque a priori, l'entête c'est ça, tous les contenus, donc thbody, c'est ça et le footer, c'est ça. Dans cette structure, il est important de mettre en premier thhead, ce qui paraît logique. Ça, c'est le début, après notre tr, voilà, donc on a un thhead ici et ensuite, parce que html a été réalisé de cette manière, nous devons écrire le thfoot, certainement par un souci d'accessibilité. Donc le pied est bien situé après le thhead et vous allez voir dans la représentation dans le navigateur, tout ça va se remettre dans le bon ordre. Ça y est, notre tableau est à présent terminé, nous allons pouvoir vérifier tout cela dans le navigateur. Voilà, donc tout s'est bien rétabli, l'élément head, l'élément thbody et l'élément thfoot. Donc il est possible d'utiliser ce type de tableau, comme je vous l'ai dit, lorsqu'il y a vraiment marqué, différencié un élément de tête et un élément de pied, un élément total, comme c'est le cas ici.
8 commentaires
5,0
8 votes
5
4
3
2
1
Polyores
Il y a 11 months
Commentaire
Bravo et bravo encore. Belle méthodologie. Hâte de voir la suite de la démystification du Html
ralahoul
Il y a 1 year
Commentaire
Une formation très intéressante et très bien construite.
eric.gk78
Il y a 3 years
Commentaire
excellent, compréhensible pour les débutants
alexwebtv
Il y a 3 years
Commentaire
Très bonne formation .
gabamano85
Il y a 3 years
Commentaire
Très belle présentation et facile à comprendre même pour un novice.
olivier_89
Il y a 3 years
Commentaire
explication très organisée et simple de comprendre pour les débutants
a.platiau_1
Il y a 3 years
Commentaire
Super formation. Très claire et très bien organisée.
ezerrou
Il y a 3 years
Commentaire
est ce la 2éme partie existe sur ce cours?
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre CSS 3
    Découvrir
    14h58 172 leçons 4,50 / 5
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5