Fiche HTML : Balises de tableaux
Objet de la fiche
État de la fiche 
Plan de la fiche
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 (1) : 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> </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
Valeurs de l'attribut scope
Valeurs |
Descriptions |
scope="col" |
Le
contenu de la cellule d'entête sera répété pour toutes les
cellules de cette colonne |
scope="row" |
Le contenu de la cellule d'entête sera répété pour toutes
les cellules de cette rangée |
scope="colgroup" |
Le contenu de la cellule d'entête
sera répété pour toutes les cellules de toutes les
colonnes du groupe de colonnes (colgroup = groupe de
colonnes). La condition préalable est que des groupes de
colonnes aient été définis avec <colgroup>. |
scope="rowgroup" |
est prévu pour l'entête de rangée d'un groupe de
rangées et signifie que le contenu de la cellule d'entête
sera répété pour toutes les cellules de toutes les rangées
du groupe de rangées (rowgroup = groupe de rangées). Les
groupes de lignes sont définis par les éléments <thead>,
<tfoot> et <tbody>. |
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.
Déclaration HTML |
Rendu |
|
Voici mon tableau
Noms |
Prénoms |
Téléphone |
Durand |
Paul |
07112233 |
|
Exemple avec la cellule Paul : lors d'une
reproduction vocale le système énoncera d'abord que le
contenu Paul appartient à la colonne Prénoms, soit on
entendra Prénom Paul. Exemple avec la cellule
07112233 : la reproduction vocale donnera Paul Téléphone
07112233. Paul sera énoncé grâce au headers Noms,
Téléphone sera énoncé grâce au headers Col_Téléphone et
07112233 comme contenu de la cellule. |
Cas particulier de cellules fusionnées
Déclaration HTML |
Rendu |
|
Voici mon tableau
Noms |
Prénoms |
Téléphone |
Durand Paul |
07112233 |
|
Soit le cas ci contre de cellules fusionnées ou deux
cellules d'entête Noms et Prénoms concernent une cellule
de données (dont le contenu est Durand Paul): On peut
définir plusieurs attributs headers (vous pouvez
entrer d'autres noms id de cellules d'entête derrière
headers=. Séparez les noms id par des espaces. Un système
de reproduction vocale donnera Noms Prénom Durand Paul. |
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.
Retrouvez la solution
Correction
Voici le résultat et le code
|