Quiz récap'

Quiz récap' sur les tableaux.

Le titre d'un tableau est obligatoire.

  1. Vrai
  2. Faux

Réponse a - Vrai
Un tableau doit avoir un titre

Pour donner un titre à un tableau, on écrira :

  1. <table title="Titre de mon tableau">[...]</table>
  2. <table><caption>Titre de mon tableau</caption>[...]</table>
  3. <table><tabcaption>Titre de mon tableau</tabcaption>[...]</table>

Réponse b - <table><caption>Titre de mon tableau</caption>[...]</table>
Important : L'élément caption sera écrit dans le code HTML immédiatement après la balise ouvrante <table>

Dans le cas d'un tableau servant uniquement à la mise en forme du texte, on écrira :

  1. <table role="presentation" ...>
  2. <table ...>

Réponse a - <table role="presentation">
On rajoute le rôle aria « presentation » et on n'utilisera aucune des techniques de codage spécifiques aux tableaux simples ou complexes.

Dans un tableau, les lignes d’entête sont implémentées dans l'élément HTML :

  1. thead
  2. theader
  3. tbody
  4. tfoot

Réponse a - thead
theader n'existe pas ;
tbody encadre les balises du contenu du tableau ;
tfoot encadre les balises du pied du tableau.

Pour indiquer qu'une cellule porte sur une ligne complète, on écrira :

  1. <td scope="col">[...]</td>
  2. <td scope="row">[...]</td>
  3. <th scope="col">[...]</th>
  4. <th scope="row">[...]</th>

Réponse c - th scope="col"
l'attribut scopene peut se poser que sur une balise th ;
scope="row" précise la portée de l'information sur la ligne et non pas sur la colonne.

Pour qu'un tableau soit considéré comme accessible, il doit respecter la règle suivante :

  1. Le tableau doit faire une largeur de 100% quelque soit la taille de l’écran.
  2. Lorsque le contenu du tableau est linéarisé, le contenu reste compréhensible.

Réponse b
Pour vérifier la compréhension du contenu du tableau dans ce cas, vous pouvez utiliser l’extension de navigateur « web developper » et choisir « Misceallanous » - « Linearize page ».

Dans le cas d'un tableau de données complexe, le titre de tableau doit fournir un résumé qui décrit la composition du tableau

  1. Vrai
  2. Faux

Réponse b - Faux
Un résumé du tableau sera bien proposé mais il ne sera proposé dans le titre du tableau (élément caption). Son résumé se fera d'une autre manière, en utilisant une zone spécifique à laquelle le tableau fera référence vie l'attribut aria-describedby.

Exemple :

<p id="description">La première colonne indique le nombre de chambre, les autres colonnes indiquent le type de logement et le nombre de logement disponible.

<table aria-describedby="description"><caption>Type et nombre de logements disponibles</cpation>...

Dans le cas d'un tableau de données complexe, pour associer les colonnes à leurs entêtes, on peut utiliser :

  1. <th scope="colgroup">
  2. <th scope="rowgroup">
  3. <th scope="colgroup"> et <th scope="rowgroup">

Réponse c
Selon ce sur quoi porte la cellule, on utilisera

  • soit <th scope="colgroup">, si la cellule porte que un groupe de colonnes.
  • soit <th scope="rowgroup">, si la cellule porte que un groupe de lignes.

Un élément HTML colgroup peut être posé n'importe où dans le code du tableau.

  1. Vrai
  2. Faux

Réponse b - Faux
Un élément HTML colgroup doit apparaître immédiatement après l'élément caption.

Les éléments HTML colgroup et col sont utilisés pour grouper et identifier des lignes au sein d’un tableau

  1. Vrai
  2. Faux

Réponse b - Faux
colgroup et col peuvent être utilisé pour grouper et identifier des colonnes, pas des lignes.