Fiche HTML : Balises de tableaux

Objet de la fiche

État de la fiche

Plan de la fiche

• | Avant propos |
• | Les attributs |
• | Structure et syntaxe générale |
• | Fusionner des cellules |
• | Attributs d' accessibilité |
• | Bonnes habitudes |
• | Application au projet de site Web |

Avant propos

Nous allons ici découvrir l'utilisation détaillée des balises de tableaux ainsi que leurs attributs directs (lorsqu'ils existent).
Nota : Dans la section HTML ne sont décrites que les balises avec leurs attributs de base. Les attributs de style qui sont souvent commun à l'ensemble des balises seront étudiés dans la section Feuilles de style (CSS)

Les attributs

Il est souvent intéressant de présenter des informations (textes, données, images) de façon mieux structurées qu'avec des listes. Les tableaux permettent de les afficher en lignes et en colonnes.

Balises

Tableau des balises

Balises	Descriptions
<table>	Délimiteur de tableau. Fin de tableau avec </table>
<caption>	Délimiteur de titre du tableau. Fin de titre de tableau avec </caption> Le titre du tableau peut être placé au-dessus du tableau (par défaut) ou  en dessous du tableau (nous verrons cela dans la section feuilles de style).
<tr>	Déclaration d'une ligne. Fin de ligne avec </tr>

Tableau des balises (suite)

Balises	Descriptions
<td>	Cellules du tableau. Fin de cellule avec </td> Attributs de la balise <td> Attributs de <td> Commentaires colspan ="x" Fusionner des cellules des cellules dans une ligne. rowspan ="y" Fusionner des cellules des cellules dans une colonne. abrr ="texte" Suivant l'importance du contenu de la cellule associez l'attribut abbr à cette balise. Cette abréviation n'est pas visible pour un visiteur classique mais utilisée par les systèmes vocaux. Exp. : <td abbr = "Informations capitale sur la situation planétaire">Cellule colonne 1 Ligne 1</td> axis = "texte" Attribue une catégorie à la cellule (par exemple <td axis="Ville">Fontainebleau</td> headers =  id de la cellule d'entête à laquelle on se réfère Spécifie la liste de cellules se rapportant à une cellule particulière
<colgroup> et <col>	Balises de groupement. Fin avec </colgroup> et <col /> Ces balises servent  à grouper des colonnes afin d'y appliquer un certain style (nous verrons cela dans la section feuilles de style).
<thead>(1)	Délimiteur de l'entête de tableau. Fin d'entête avec </thead>
<th>(1)	Cellules entête de tableau. Fin de la cellule entête avec </th>. Les mêmes attributs que la balise td s'appliquent à la balise th.   I abbr="Informations" Associez systématiquement l'attribut abbr à cette balise. id="texte" dentificateur de la cellule d'entête sur laquelle se réfèrent d'autres cellules par l'intermédiaires de l'attribut headers
<tbody>(1)	Facultatif. Permet de définir un ensemble de lignes comme le "corps" du tableau. Fin de l'ensemble avec </tbody>
<tfoot>(1)	Facultatif. Délimiteur du pied de tableau. Fin de définition du pied de tableau avec </tfoot>

Note ⁽¹⁾ : Ces balises (bien que non indispensables dans la construction des tables) sont à utiliser systématiquement dans le cadre de l'amélioration de l'accessibilité des contenus Web.
: Ces attributs (bien que non indispensables dans la construction des tables) sont à utiliser systématiquement dans le cadre de l'amélioration de l'accessibilité des contenus Web. Un système vocal sera en mesure de restituer ces informations  avant le contenu proprement dit.

Structure et syntaxe générale

Exemple

Fusionner des cellules

Généralités

Fusionner des cellules c'est obtenir une cellule qui se comporte exactement comme une cellule unique mais qui occupent plusieurs emplacements de cellules initiales du tableau.

Par exemple la figure ci-contre montre le résultat d'une part de la fusion des cellules rangées 2, colonnes 2 et 3, et d'autre part la fusion des cellules colonne 4, rangées 2 et 3. Pour réaliser des fusions nous allons utiliser les attributs colspan pour une fusion en ligne, et rowspan pour une fusion en colonnes.

Exemples

Dans une rangée sur plusieurs colonnes : colspan	Dans une colonne sur plusieurs rangées : rowspan	Dans plusieurs colonnes et plusieurs rangées
Dans la deuxième ligne la première cellule est déclarée normalement (<td>&nbsp;</td>). La deuxième cellule avec l'attribut colspan="2" occupe l'emplacement de 2 cellules (la 2 et la 3). A la suite de ça la déclaration de la cellule 3 doit être  supprimée. La déclaration suivante ( <td>Y</td> ) concerne donc (comme dans le tableau de base) la cellule 4, et la suivante la cellule 5.	Dans la deuxième ligne la première, seconde et troisième  cellule sont déclarées normalement. La quatrième cellule occupe deux cellules verticalement : la propre cellule et celle juste en dessous. C'est ce que défini l'attribut rowspan="2". A partir du moment ou l'on réserve la cellule 4 de la ligne suivante, la déclaration initiale de la cellule 4 ligne 3 disparaît.

Faite bien attention dans ce genre de construction car un seul oubli de suppression de cellule et vous obtenez des tableaux bizarres.

Attributs  d' accessibilité

Tous ces attributs ont pour but de favoriser une reproduction vocale la plus précise possible dans la description d'un tableau pour des utilisateurs utilisant des systèmes vocaux de lecture d'écran.

Référencer les cellules d'entête dans les cellules : attribut scope

Le tableau ci contre est simple du point de vue visuel, mais compliqué pour les navigateurs non visuel car chaque cellule dépend à la fois du titre de la colonne mais aussi du titre de la ligne. Par exemple la cellule Bourgogne se trouve à l'intersection de la colonne Région et de la ligne Auxerre. La méthode la plus simple et la plus propre pour s'assurer que les navigateurs non visuels peuvent comprendre le sens de ce tableau est d'ajouter l'attribut scope à toutes les cellules d'en-tête (th) de manière à donner une information vocale quand à l'appartenance d'une cellule par rapport son entête de colonne et son entête de ligne.

Valeurs de l'attribut scope

Exemples

<table> <caption>Démo</caption> <tr> <th scope="col">Département</th> <th scope="col">Région</th> </tr> <tr> <td>Seine et Marne</td> <td>Ile de France</td> </tr> <tr> <td>Yonne</td> <td>Bourgogne</td> </tr> </table>

<table> <caption>Démo</caption> <tr> <td>Sociétés</td> <th scope="col">Ville</th> <th scope="col">CA</th> </tr> <tr> <th scope="row">Peugeot</th> <td>Fontainebleau</td> <td>11.000000€</td> </tr> <tr> <th scope="row">Renault</th> <td>Paris</td> <td>10.000000€</td> </tr> </table>

Au survol de la cellule Bourgogne un navigateur vocal indiquera Région Bourgogne car la directive <th scope="col">Région</th> s'applique à toutes les cellules de cette colonne.

Au survol de la cellule 10.000000€ un navigateur vocal indiquera Renault CA 10.000000€ car la directive <th scope="col">CA</th> s'applique à toutes les cellules de cette colonne et la directive <th scope="row">Renault</th> s'applique à toutes les cellules de cette ligne.

Au survol de la cellule 7h un navigateur vocal indiquera le contenu de la cellule, soit 7h et énoncera les entêtes : il précisera tout d'abord Soleil car la directive <th scope="row">Soleil</th> s'applique à toutes les cellules de cette ligne puis Hiver car la directive <th colspan="2" scope="colgroup">Hiver</th> s'applique au groupe de colonnes Leve et Couché puis enfin Leve  dont la directive <th scope="col">Leve</th> s'applique à toutes les cellules de cette colonne.

Spécifier la liste de cellules se rapportant à une cellule particulière : attribut headers

Cas général

Lors de la reproduction vocale il est difficile de faire la relation entre la cellule de données et la cellule d'entête correspondante, on peut définir que lors de la reproduction vocale d'une cellule de données soit établie une ou plusieurs références explicites (headers) à la ou à des cellules d'entête référencées par leur id).

Les exemples ci dessous prennent comme référence des cellules d'entêtes (th) mais pourraient tout aussi bien fonctionner avec des cellules classiques (td).

headers doit toujours être utilisé en association avec un identificateur(id) et s'utilise essentiellement quand l'attribut scope n'est pas suffisant.

Cas particulier de cellules fusionnées

Définir des catégories de tableau : Attribut axis

On peut imaginer des utilisateurs désirant avoir des informations sur plus d'une cellule, dans ce cas les informations sur la cellule à l'aide des attributs headers, scope ou abbr peuvent ne pas être suffisantes dans certains contextes. Par exemple le tableau ci contre qui classifie des dépenses de repas, hôtels et transports dans 2 villes Marseille et Lyon sur plusieurs dates.

L'attribut axis associé aux attributs headers et id apportera des possibilités d'informations et sera utile avec les futurs navigateurs équipés de détection et synthèse vocales. 

Étude détaillé du tableau "Frais de déplacement"

Imaginons un utilisateur qui pourrait poser de telles questions :

Qu'elles sont mes dépenses pour tous mes repas?
Qu'elle est ma dépense pour le repas du 25 Août?
Qu'elles sont mes dépenses totale à Marseille?

Chaque question demande à ce que le navigateur tienne compte de plusieurs cellules. Par exemple dans la deuxième question le navigateur doit savoir quelles cellules concernent les Repas, et quelles cellules se réfère aux Dates et particulièrement celle du 25 Août , trouver l'intersection puis donner le résultat en synthèse vocale.

Pour exécuter ce type de demande le langage HTML 4 autorise de grouper des cellules en catégories.
Ainsi dans le cas de la table des "Frais de déplacement" le concepteur à grouper les cellules d'entête Marseille et Lyon dans la catégorie "Ville", les cellules d'entête Repas, Hôtels, Transports dans la catégorie "Depenses", et les dates dans la catégorie "Date".

C'est l'attribut axis qui permet d'affecter ces catégories qui pourront être rendues par la synthèse vocale.
Par exemple :
<th id="a6" axis="Ville">Marseille</th>

Les bonnes habitudes

• Utiliser  les attributs d'accessibilité.
• Utilisez l'attribut title pour apporter une aide en ligne aux utilisateurs du site.

Application au projet de site web

• Ouvrez le bloc note,
• Ouvrez la page index.html
• Rajoutez un tableau de 4 lignes et 2 colonnes ayant pour titre "Notre catalogue". Les lignes  seront composées de la façon suivante :
  • Le contenu la première ligne, colonne 1 sera  le titre : Fleurs.
  • Le contenu la première ligne, colonne 2 sera  le titre : Bouquets
  • Le contenu la troisième ligne, colonne 1 sera  le titre : Compositions
  • Le contenu la troisième ligne, colonne 2 sera  le titre : Plantes

Les cellules de la seconde ligne contiendront la définition des images déjà déclarée dans l'exercice précédent.:

• La cellule ligne 2, colonne 1 contiendra l'image Roses1.png déjà déclarée dans l'exercice précédent.
• La cellule ligne 2, colonne 2  contiendra l'image Bouquet1.png déjà déclarée dans l'exercice précédent.
• La cellule ligne 4, colonne 1  contiendra l'image Compo1.png déjà déclarée dans l'exercice précédent.
• La cellule ligne 4, colonne 2  contiendra l'image Plantes1.png déjà déclarée dans l'exercice précédent.

• Sauvegarder la page.

Retrouvez la solution