Tableaux

• Généralités
• Éléments obsolètes
• Styles de tableaux
  • Tableaux avec bordures
  • Tableaux sans bordure
  • Tableaux à zébrures
  • Tableaux avec accents
  • Couleurs d'arrière-plan
  • Coins arrondis
• Formatage des tableaux
  • summary
  • <caption>
  • Descriptions longues
  • Classes cellspacing et cellpadding
  • Largeur des tableaux et des colonnes
  • Classes align et float
  • Notes de bas de page
  • Hyperliens dans des cellules
  • Cellules vides
  • Balises <thead>, <tfoot> et <tbody>
• Types de tableaux
  • Tableaux de mise en page
  • Tableaux simples
  • Tableaux complexes

---

Généralités

• N'utilisez pas une image, comme JPEG ou GIF, pour afficher un tableau.
• Évitez d'utiliser l'élément <pre> pour afficher un texte sous forme de tableau (voir l'échec F48 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.1).
• Évitez d'utiliser les CSS pour placer le texte dans les colonnes; y préférer le balisage recommandé pour les tableaux (voir l'échec F1 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.2).
• Utilisez le balisage <table> recommandé dans les pages Web (voir les techniques suffisantes H51 et G115 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.1) et dans les documents PDF (voir les techniques suffisantes PDF6 et PDF20 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.1). Parmi ces balises, mentionnons :
  
  
  • début et fin (<table></table> [site en anglais seulement])
  • <caption> (site en anglais seulement), qui sert de titre au tableau
  • <th> (site en anglais seulement), en-têtes de colonnes et de rangs
  • <th scope="col"> et <th scope="row"> pour les tableaux simples
  • élément id dans la balise <th> et balise headers dans <td>, pour les tableaux complexes
  • <tr> (site en anglais seulement), qui désigne les rangées du tableau
  • <td> (site en anglais seulement), qui désigne les cellules de données
  • balises facultatives <thead>, <tbody> et <tfoot> (site en anglais seulement)
  • balises facultatives <colgroup> et <col> (site en anglais seulement)

haut de la page

Éléments obsolètes

Les éléments suivants sont maintenant déconseillés dans les pages HTML5 :

• élément summary dans <table> (utilisez plutôt l'élément <caption>)
• élément scope dans <td> (utilisez scope dans <th> pour les tableaux simples, et headers et id dans les tableaux complexes)
• élément align dans <caption>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead> et <tr> (utilisez plutôt les classes CSS d'alignement)
• élément valign dans <tbody>, <td>, <tfoot>, <th>, <thead> et <tr> (utilisez plutôt les classes CSS d'alignement)
• élément cellpadding (voir les classes CSS d'espacement)
• élément cellspacing
• élément width dans <table>, <td> et <th> (utilisez plutôt les classes CSS de largeur)
• élément height dans <td> et <th> (utilisez plutôt les classes CSS de hauteur des lignes)
• élément bgcolor dans <table>, <tr>, <td> et <th> (utilisez plutôt les classes CSS de couleur d'arrière-plan)
• élément nowrap dans <td> et <th>
• élément rules dans <table>
• éléments axis et abbr dans <td> et <th>
• éléments char et charoff dans <tbody>, <td>, <tfoot>, <th>, <thead> et <tr>
• éléments frame dans <table>

Source : W3C (en anglais seulement)

haut de la page

Styles de tableaux

Tableaux avec bordures

• La classe class="lined" encadre toutes les cellules d'une bordure pâle (#cccccc) de 1 pixel.
• Le titre du tableau (balise <caption>) est justifié à gauche, en caractères gras blancs (taille 120 %) sur un arrière-plan gris foncé (#666666).
• L'arrière-plan des cellules d'en-tête (<th>) et de pied de page (<tfoot>) est en gris pâle (#eeeeee).
• L'attribut cellspacing des cellules de données (<td>) et d'en-tête (<th>) est réglé à zéro (0); l'attribut cellpadding est réglé à 1 pixel en haut et en bas et à 3 pixels à gauche et à droite.

Exemple

haut de la page

Tableaux sans bordure

• La classe class="unlined" encadre le tableau seulement d'une bordure gris foncé (#cccccc) de 1 pixel.
• Le titre du tableau (balise <caption>) est justifié à gauche, en caractères gras blancs (taille 120 %) sur un arrière-plan gris foncé (#666666).
• L'arrière-plan des cellules d'en-tête (<th>) et de pied de page (<tfoot>) est en gris pâle (#eeeeee).
• Ajouter la classe "altrow" à une rangée sur deux rend le tableau plus facilement lisible (voir l'exemple ci-dessous). Cette classe ajoute un arrière-plan gris très pâle (#f9f9f9) à la rangée visée.
• Vous pouvez aussi rendre le tableau plus lisible à l'aide de zébrures.
• L'attribut cellspacing des cellules de données (<td>) et d'en-tête (<th>) est réglé à zéro (0); l'attribut cellpadding est réglé à 1 pixel en haut et en bas et à 8 pixels à gauche et à droite.

Exemple

haut de la page

Tableaux à zébrures

• Sites Web qui relèvent de l'EEIC — Ajoutez le code suivant à l'onglet Gadgets de la BOEW, dans le document de l'EEIC : zebra: "",
• Applications et sites Web qui ne relèvent pas de l'EEIC — Ajoutez le code zebra: "" dans la section <head> du modèle, sous menubar:"",
• La classe class="zebra" ajoute un arrière-plan gris pâle (#eeeeee) à une rangée sur deux.
• Les rangées sont mises en évidence (en bleu pâle) si vous les survolez avec votre pointeur.

Exemple

• Vous pouvez ajouter la classe nohover à un tableau à zébrures (classe zebra) afin d'éviter la mise en évidence si vous les survolez avec votre pointeur (p. ex., <table class="zebra nohover">).

Exemple

haut de la page

Tableaux avec accents

• Avec l'attribut table-accent, l'en-tête du tableau (<th>) est affiché en blanc sur fond bleu foncé (#1a3d6c).

Exemple

haut de la page

Couleurs d'arrière-plan

Consultez la page Couleurs d'arrière-plan pour connaître les codes de couleur à utiliser.

Exemple

haut de la page

Coins arrondis

• La classe rounded vous permet d'arrondir les coins du tableau.

 

Exemple

haut de la page

Formatage des tableaux

summary

• La balise summary est déconseillée dans HTML5; évitez de l'utiliser (ignorez la technique H73 [en anglais seulement]).
• Le texte de la balise summary n'est jamais affiché; on ne peut le consulter que dans le code source. Supprimez donc toute balise summary et placez-en plutôt le texte dans une balise <p> pour créer un paragraphe de présentation avant le tableau.

haut de la page

<caption>

• Tous les tableaux (à l'exception des tableaux de mise en page et les tableaux intégrés à une <figure>) doivent avoir une balise (<caption>) (voir la technique H39 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.1).
• La balise (<caption>) constitue le titre du tableau.
• Un tableau ne peut avoir qu'un seul titre (balise <caption>).
• Pour masquer le titre (<caption>), utilisez les classes cn-invisible ou HiddenElement (voir les exemples ci-dessous).

Exemples

Titre sans classe appliquée au tableau

Masquage du titre par la classe HiddenElement

Titre avec classes size, colour et bold appliquées au tableau

Titre avec la classe lined appliquée au tableau

haut de la page

Descriptions longues

• Les descriptions longues sont nécessaires si le tableau est complexe ou s'il exige d'autres explications.
• Ces descriptions devraient expliquer l'objet du tableau et sa structure, attirer l'attention sur toute tendance ou motif pertinent, et, en règle générale, expliquer comment l'utiliser.
• Placez toute description longue, ou tout lien à celle-ci, soit juste en-dessous du tableau (sauf si elle fait partie d'un paragraphe de présentation), soit dans la balise <caption> du tableau.

Il existe plusieurs façons d'ajouter une description longue à un tableau, notamment :

Option 1 : Paragraphe de présentation

Intégrez la description à un paragraphe de présentation juste au-dessus du tableau.

Option 2 : Gadget expandhide

Ajoutez à l'aide du gadget expandhide la description longue à une boîte extensible, placée juste en-dessous du tableau et dont l'en-tête est « Description longue » (l'en-tête DOIT être dans des balises <h>; veillez donc à choisir le niveau approprié).

Exemple

Sites Web qui relèvent de l'EEIC — Ajoutez le code suivant à l'onglet Gadgets de la BOEW, dans le document de l'EEIC : expandhide:"",

Applications et sites Web qui ne relèvent pas de l'EEIC — Ajoutez le code expandhide:"", sans virgule, dans la section <head> du modèle, sous menubar:"",

Code :

<div class="wet-boew-expandhide marginBottom20">
<div class="toggle-content collapse">
<h6 class="toggle-link-text">Description longue<span class="cn-invisible"> du tableau 1</span></h6>
<p>La description détaillée du tableau apparaît ici.</p>
</div>
</div>

Résultat :

Option 3 : Hyperlien « Description longue » vers la description dans une page distincte

Page Web contenant le ou les tableaux

Ajoutez au tableau visé un lien justifié à gauche ayant pour titre « Description longue », dans une balise <p> située juste en-dessous du tableau.

Ajoutez aussi des données invisibles (classe <span class="cn-invisible"> dans l'en-tête « Description longue » afin d'indiquer le numéro ou le titre du tableau.

Assurez-vous que l'hyperlien mène directement à la description pertinente de la page distincte (en d'autres termes, utilisez des liens d'ancrage) plutôt qu'à la page elle-même, sauf bien sûr si elle ne comporte qu'une description.

Exemple : <p><a href="00000.html#tableauX">Description longue<span class="cn-invisible"> du tableau 1</span></a></p>

Exemple

Tableau 1 : Employés actuels

Nom	Titre	Salaire
Marie Toutlemonde	Gestionnaire	2 000 $
Jean Toutlemonde	Directeur	2 000 $
Pierre Anonyme	Programmeur-analyste	2 000 $
Total		6 000 $

Description longue du tableau 1

Page Web contenant la ou les descriptions longues

Intitulez la page renfermant les descriptions longues : [Nom du document] — Descriptions longues

Placez le titre de chaque description dans une balise d'en-tête <h2>, et commencez ce titre par « Description longue de [X] ».

Exemple : <h2>Description longue du tableau 1 : Employés actuels</h2>

Ajoutez après chaque description un hyperlien justifié à gauche intitulé « Revenir au tableau [X] » qui ramène l'utilisateur au haut du tableau décrit.

Séparez chaque description d'une règle horizontale (<hr class="thin">).

Exemple d'une page de descriptions longues de tableaux.

Option 4 : Code <caption>

Si cette description reste courte, intégrez-la au titre du tableau (balise <caption>).

Option 5 : Code <figure>

Intégrez la description longue à une balise <figure>, juste avant le tableau. Dans ce cas, ignorez la balise <caption> et placez plutôt le titre du tableau dans la balise <figcaption> (site en anglais seulement).

Exemple

Code :

<figure>
<figcaption>Employés actuels</figcaption>
<p>Ce tableau dresse la liste des employés actuels de l'organisme. Les trois colonnes donnent respectivement le nom complet de l'employé, son titre et son salaire. La dernière rangée indique le total des salaires combinés des employés.</p>
<table>
<tr><th scope="col">Nom</th>
<th scope="col">Titre</th>
<th scope="col">Salaire</th></tr>
<tr><td>Marie&nbsp;Toutlemonde</td>
<td>Gestionnaire</td>
<td>2&nbsp;000&nbsp;$</td></tr>
<tr><td>Jean&nbsp;Toutlemonde</td>
<td>Directeur</td>
<td>2&nbsp;000&nbsp;$</td></tr>
<tr><td>Pierre&nbsp;Anonyme</td>
<td>Programmeur-analyste</td>
<td>2&nbsp;000&nbsp;$</td></tr>
<tr><th colspan="2" scope="row">Total</th>
<td>6&nbsp;000&nbsp;$</td></tr>
</table>
</figure>

Résultat :

Ce tableau dresse la liste des employés actuels de l'organisme. Les trois colonnes donnent respectivement le nom complet de l'employé, son titre et son salaire. La dernière rangée indique le total des salaires combinés des employés.

Nom	Titre	Salaire
Marie Toutlemonde	Gestionnaire	2 000 $
Jean Toutlemonde	Directeur	2 000 $
Pierre Anonyme	Programmeur-analyste	2 000 $
Total		6 000 $

haut de la page

Classes cellspacing et cellpadding

• Pour ajouter des espaces aux tableaux, préférez les attributs CSS de marges et d'espacement aux images d'espacement (voir la technique suffisante C18 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.1.1).

Code cellspacing :

• Le code cellspacing est déconseillé.

Code cellpadding :

• Le code cellpadding est déconseillé (source : W3C, en anglais seulement); utilisez plutôt les classes CSS d'espacement.
• Vous pouvez régler la classe padding pour qu'elle vise :
  1. des cellules <td> précises — voir l'exemple ci-dessous
     (p. ex., <td class="padding0">); ou
  2. le tableau complet — voir l'exemple ci-dessous
     (p. ex., <table class="widthFull padding16">).

Exemple

Application des classes padding à des cellules <td> précises

Code :

Réglage de la classe padding pour tout le tableau

haut de la page

Largeur des tableaux et des colonnes

Pour ajuster la largeur d'un tableau ou de colonnes (par sauts de 5 pixels), utilisez les classes CSS de largeur.

Exemple

Code :

<table class="widthFull lined">
<caption>Titre du tableau</caption>
<tr>
<td class="width30">Première rangée - Première colonne</td>
<td class="width70">Première rangée - Deuxième colonne</td>
</tr>
<tr>
<td class="width30">Deuxième rangée - Première colonne</td>
<td class="width70">Deuxième rangée - Deuxième colonne</td>
</tr>
</table>

Résultat :

Titre du tableau

Première rangée - Première colonne	Première rangée - Deuxième colonne
Deuxième rangée - Première colonne	Deuxième rangée - Deuxième colonne

haut de la page

Classes align et float

Classes align

Familiarisez-vous avec les classes CSS align; elles vous permettent de régler l'emplacement du texte dans les cellules.

Exemple

Code :

<table class="lined width70">
<caption>Titre</caption>
<tr>
<th scope="col">En-tête&nbsp;1</th>
<th scope="col">En-tête&nbsp;2</th>
</tr>
<tr>
<td class="alignRight">Contenu (<code>alignRight</code>)</td>
<td class="alignMiddleCenter">Contenu (<code>alignMiddleCenter</code>)</td>
</tr>
<tr>
<td class="alignBottomCenter">Contenu (<code>alignBottomCenter</code>)</td>
<td class="alignTopLeft">Contenu (<code>alignTopLeft</code>)</td>
</tr>
<tr>
<td class="alignMiddleRight">Contenu (<code>alignMiddleRight</code>)</td>
<td class="alignBottomLeft">Contenu (<code>alignBottomLeft</code>)</td>
</tr>
</table>

Résultat :

Titre

En-tête 1	En-tête 2
Contenu (alignRight)	Contenu (alignMiddleCenter)
Contenu (alignBottomCenter)	Contenu (alignTopLeft)
Contenu (alignMiddleRight)	Contenu (alignBottomLeft)

Classes float

Avec les classes CSS float (floatLeft et floatRight), vous pouvez régler la position du tableau dans la page Web.

Exemple

Code :

<table class="floatRight width50">
<caption>Titre</caption>
<tr>
<th scope="col">En-tête&nbsp;1</th>
<th scope="col">En-tête&nbsp;2</th>
</tr>
<tr>
<td>Contenu</td>
<td>Contenu</td></tr>
<tr><td>Contenu</td>
<td>Contenu</td>
</tr>
</table>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

Résultat :

Titre

En-tête 1	En-tête 2
Contenu	Contenu
Contenu	Contenu

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

haut de la page

Notes de bas de page

• Consultez la page Notes de bas de page pour en savoir plus sur les conventions touchant la nomenclature et le formatage des notes de bas de page.
• Il existe quatre façons d'intégrer des notes de bas de page à un tableau :
  • dans une cellule élargie (<td>) en bas du tableau (voir l'exemple ci-dessous);
  • dans une section (<section>) juste après le tableau (voir l'exemple ci-dessous);
  • dans le pied de page (<tfoot>), si les codes <thead>, <tbody> et <tfoot> sont déjà utilisés (voir l'exemple ci-dessous); ou
  • dans un tableau se trouvant dans une figure (<figure>) (source : W3C [en anglais seulement]) (voir l'exemple ci-dessous).

Exemples

Option 1 : Notes de bas de page placées dans une cellule élargie (<td>) en bas du tableau

Code :

<table class="lined">
<caption>Employés actuels</caption>
<tr>
<th scope="col">Nom</th>
<th scope="col">Titre</th>
<th scope="col">Salaire</th>
</tr>
<tr>
<td>Marie&nbsp;Toutlemonde</td>
<td>Gestionnaire</td>
<td>2&nbsp;000&nbsp;$</td>
</tr>
<tr><td>Jean&nbsp;Toutlemonde<sup id="fnb1-ref"><a class="footnote-link" href="#fnb1"><span class="cn-invisible">Note </span>1</a></sup></td>
<td>Directeur</td>
<td>2&nbsp;000&nbsp;$</td></tr>
<tr>
<td>Pierre&nbsp;Anonyme</td>
<td>Programmeur-analyste<sup id="fnb2-ref"><a class="footnote-link" href="#fnb2"><span class="cn-invisible">Note </span>2</a></sup></td>
<td>2&nbsp;000&nbsp;$</td>
</tr>
<tr>
<th colspan="2" scope="row">Total</th>
<td>6&nbsp;000&nbsp;$</td>
</tr>
<tr>
<td colspan="3">
<section>
<div class="wet-boew-footnotes" role="note">
<h2 id="fnb" class="cn-invisible">Notes</h2>
<dl>
<dt>Note 1</dt>
<dd id="fnb1">
<p>Texte de la note 1.</p>
<p class="footnote-return"><a href="#fnb1-ref"><span class="cn-invisible">Retour au tableau (note </span>1<span class="cn-invisible">)</span></a></p>
</dd>
<dt>Note 2</dt>
<dd id="fnb2">
<p>Texte de la note 2.</p>
<p class="footnote-return"><a href="#fnb2-ref"><span class="cn-invisible">Retour au tableau (note </span>2<span class="cn-invisible">)</span></a></p>
</dd>
</dl>
</div>
</section>
</td>
</tr>
</table>

Résultat :

Employés actuels

Nom	Titre	Salaire
Marie Toutlemonde	Gestionnaire	2 000 $
Jean ToutlemondeNote 1	Directeur	2 000 $
Pierre Anonyme	Programmeur-analysteNote 2	2 000 $
Total		6 000 $
Notes Note 1 Texte de la note 1. Retour au tableau (note 1) Note 2 Texte de la note 2. Retour au tableau (note 2)

---

Option 2 : Notes intégrées à une section (<section>) juste après le tableau

Code :

<table class="lined">
<caption>Employés actuels</caption>
<tr>
<th scope="col">Nom</th>
<th scope="col">Titre</th>
<th scope="col">Salaire</th>
</tr>
<tr>
<td>Marie&nbsp;Toutlemonde</td>
<td>Gestionnaire</td>
<td>2&nbsp;000&nbsp;$</td>
</tr>
<tr><td>Jean&nbsp;Toutlemonde<sup id="fnb3-ref"><a class="footnote-link" href="#fnb3"><span class="cn-invisible">Note </span>3</a></sup></td>
<td>Directeur</td>
<td>2 000 $</td></tr>
<tr>
<td>Pierre&nbsp;Anonyme</td>
<td>Programmeur-analyste<sup id="fnb4-ref"><a class="footnote-link" href="#fnb4"><span class="cn-invisible">Note </span>4</a></sup></td>
<td>2&nbsp;000&nbsp;$</td>
</tr>
<tr>
<th colspan="2" scope="row">Total</th>
<td>6&nbsp;000&nbsp;$</td>
</tr>
</table>
<section>
<div class="wet-boew-footnotes" role="note">
<h2 id="fnbX" class="cn-invisible">Notes</h2>
<dl>
<dt>Note 3</dt>
<dd id="fnb3">
<p>Texte de la note 3.</p>
<p class="footnote-return"><a href="#fnb3-ref"><span class="cn-invisible">Retour au tableau (note </span>3<span class="cn-invisible">)</span></a></p>
</dd>
<dt>Note 4</dt>
<dd id="fnb4">
<p>Texte de la note 4.</p>
<p class="footnote-return"><a href="#fnb4-ref"><span class="cn-invisible">Retour au tableau (note </span>4<span class="cn-invisible">)</span></a></p>
</dd>
</dl>
</div>
</section>

Résultat :

Employés actuels

Nom	Titre	Salaire
Marie Toutlemonde	Gestionnaire	2 000 $
Jean ToutlemondeNote 3	Directeur	2 000 $
Pierre Anonyme	Programmeur-analysteNote 4	2 000 $
Total		6 000 $

Notes

Note 3

Texte de la note 3.

Retour au tableau (note 3)

Note 4

Texte de la note 4.

Retour au tableau (note 4)

Option 3 : Notes dans un tableau où les balises <thead>, <tbody> et <tfoot> sont déjà utilisées

Code :

<table class="lined">
<caption>Employés actuels</caption>
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Titre</th>
<th scope="col">Salaire</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">
<section>
<div class="wet-boew-footnotes" role="note">
<h2 id="fnb" class="cn-invisible">Notes</h2>
<dl>
<dt>Note 5</dt>
<dd id="fnb5">
<p>Texte de la note 5.</p>
<p class="footnote-return"><a href="#fnb5-ref"><span class="cn-invisible">Retour au tableau (note </span>5<span class="cn-invisible">)</span></a></p>
</dd>
<dt>Note 6</dt>
<dd id="fnb6">
<p>Texte de la note 6.</p>
<p class="footnote-return"><a href="#fnb6-ref"><span class="cn-invisible">Retour au tableau (note </span>6<span class="cn-invisible">)</span></a></p>
</dd>
</dl>
</div>
</section>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Marie&nbsp;Toutlemonde</td>
<td>Gestionnaire</td>
<td>2&nbsp;000&nbsp;$</td>
</tr>
<tr><td>Jean&nbsp;Toutlemonde<sup id="fnb5-ref"><a class="footnote-link" href="#fnb5"><span class="cn-invisible">Note </span>5</a></sup></td>
<td>Directeur</td>
<td>2&nbsp;000&nbsp;$</td></tr>
<tr>
<td>Pierre&nbsp;Anonyme</td>
<td>Programmeur-analyste<sup id="fnb6-ref"><a class="footnote-link" href="#fnb6"><span class="cn-invisible">Note </span>6</a></sup></td>
<td>2&nbsp;000&nbsp;$</td>
</tr>
<tr>
<th colspan="2" scope="row">Total</th>
<td>6&nbsp;000&nbsp;$</td>
</tr>
</tbody>
</table>

Résultat :

Employés actuels

Nom	Titre	Salaire
Notes Note 5 Texte de la note 5. Retour au tableau (note 5) Note 6 Texte de la note 6. Retour au tableau (note 6)
Marie Toutlemonde	Gestionnaire	2 000 $
Jean ToutlemondeNote 5	Directeur	2 000 $
Pierre Anonyme	Programmeur-analysteNote 6	2 000 $
Total		6 000 $

---

Option 4 : Notes visant un tableau se trouvant dans une figure (<figure>)

Code :

<figure>
<figcaption>Employés actuels</figcaption>
<p>Ce tableau dresse la liste des employés actuels de l'organisme. Les trois colonnes donnent respectivement le nom complet de l'employé, son titre et son salaire. La dernière rangée indique le total des salaires combinés des employés.</p>
<table>
<tr>
<th scope="col">Nom</th>
<th scope="col">Titre</th>
<th scope="col">Salaire</th>
</tr>
<tr>
<td>Marie&nbsp;Toutlemonde</td>
<td>Gestionnaire</td>
<td>2&nbsp;000&nbsp;$</td>
</tr>
<tr><td>Jean&nbsp;Toutlemonde<sup id="fnb7-ref"><a class="footnote-link" href="#fnb7"><span class="cn-invisible">Note </span>7</a></sup></td>
<td>Directeur</td>
<td>2&nbsp;000&nbsp;$</td></tr>
<tr>
<td>Pierre&nbsp;Anonyme</td>
<td>Programmeur-analyste<sup id="fnb8-ref"><a class="footnote-link" href="#fnb8"><span class="cn-invisible">Note </span>8</a></sup></td>
<td>2&nbsp;000&nbsp;$</td>
</tr>
<tr>
<th colspan="2" scope="row">Total</th>
<td>6&nbsp;000&nbsp;$</td>
</tr>
</table>
<section>
<div class="wet-boew-footnotes" role="note">
<h2 id="fnb" class="cn-invisible">Notes</h2>
<dl>
<dt>Note 7</dt>
<dd id="fnb7">
<p>Texte de la note 7.</p>
<p class="footnote-return"><a href="#fnb7-ref"><span class="cn-invisible">Retour au tableau (note </span>7<span class="cn-invisible">)</span></a></p>
</dd>
<dt>Note 8</dt>
<dd id="fnb8">
<p>Texte de la note 8.</p>
<p class="footnote-return"><a href="#fnb8-ref"><span class="cn-invisible">Retour au tableau (note </span>8<span class="cn-invisible">) </span></a></p>
</dd>
</dl>
</div>
</section>
</figure>

Résultat :

Ce tableau dresse la liste des employés actuels de l'organisme. Les trois colonnes donnent respectivement le nom complet de l'employé, son titre et son salaire. La dernière rangée indique le total des salaires combinés des employés.

Nom	Titre	Salaire
Marie Toutlemonde	Gestionnaire	2 000 $
Jean ToutlemondeNote 7	Directeur	2 000 $
Pierre Anonyme	Programmeur-analysteNote 8	2 000 $
Total		6 000 $

Notes

Note 7

Texte de la note 7.

Retour au tableau (note 7)

Note 8

Texte de la note 8.

Retour au tableau (note 8)

haut de la page

Hyperliens dans des cellules

• Si vous établissez un contexte limpide entre la cellule où se trouve l'hyperlien et l'en-tête de la colonne pertinente, un hyperlien non explicite est acceptable (voir la technique H79 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 2.4.4).

Exemple

Code :

<table class="lined">
<caption>Locations d'automobiles</caption>
<tr>
<td></td>
<th scope="col">Entreprise A</th>
<th scope="col">Entreprise B</th>
<th scope="col">Entreprise C</th>
</tr>
<tr>
<th scope="row">Compactes</th>
<td><a href="comp_a.ca">68&nbsp;$/jour</a></td>
<td><a href="comp_b.ca">69&nbsp;$/jour</a></td>
<td><a href="comp_c.ca">74&nbsp;$/jour</a></td>
</tr>
<tr>
<th scope="row">Berlines</th>
<td><a href="full_a.ca">82&nbsp;$/jour</a></td>
<td><a href="full_b.ca">83&nbsp;$/jour</a></td>
<td><a href="full_c.ca">89&nbsp;$/jour</a></td>
</tr>
</table>

Résultat :

Locations d'automobiles

	Entreprise A	Entreprise B	Entreprise C
Compactes	68 $/jour	69 $/jour	74 $/jour
Berlines	82 $/jour	83 $/jour	89 $/jour

haut de la page

Cellules vides

Les normes en matière d'accessibilité ne proposent pas de balisage pour les cellules vides. Voici toutefois des règles générales à suivre :

• N'utilisez pas de caractères blancs tels qu'une espace insécable ( ), une tabulation ou un saut de ligne pour le formatage des tableaux (voir la technique suffisante G57 et l'échec F34 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.2).
• N'utilisez pas d'image d'espacement à titre de contenu dans une cellule vide (voir la technique suffisante C18 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.1.1).
• S'il y a une cellule vide, soit insérez un trait d'union (<td>-</td>) de manière à ce que le lecteur d'écran le lise au lieu d'ignorer la cellule (voir l'exemple ci-dessous), soit n'insérez rien.
• Utilisez <td></td> plutôt que <th> lorsque vous codez la cellule vide de la rangée des en-têtes du tableau (habituellement située dans le coin supérieur gauche du tableau) (voir les exemples ci-dessous et la page Amélioration de l'accessibilité des tableaux).

• Il existe deux classes CSS permettant de définir la bordure qui encadre une cellule vide :
  • show-empty-cells
  • hide-empty-cells
• Par défaut, une cellule vide sera encadrée d'une bordure (sauf lorsque la classe table class="unlined" est utilisée).

haut de la page

Balises <thead>, <tfoot> et <tbody>

• La balise <thead> définit un en-tête de tableau répété, <tfoot>, un pied de page répété, et <tbody>, tout autre groupe de rangées (site en anglais seulement).
• Une balise <thead> est obligatoire si vous utilisez la balise <tbody>, mais la balise <tfoot> reste facultative.
• Voici les règles d'utilisation de ces balises :
  
  
  • <thead> — facultative, au plus une par tableau
  • <tfoot> — facultative, au plus une par tableau
  • <tbody> — obligatoire si l'une des balises ci-dessus est utilisée, autrement facultative (aucune limite de nombre)
• Dans le cas d'un tableau d'envergure, réparti sur plus d'une page, utilisez les balises <thead> et <tfoot> afin de vous assurer que l'en-tête et le pied de page du tableau figurent correctement sur chaque page.
• Si vous les utilisez, entrez ces balises dans l'ordre suivant : <thead>, <tfoot>, <tbody>.

Exemple

<table>
<caption></caption>
<thead>
<tr>
<td>En-tête&nbsp;1</td>
<td>En-tête&nbsp;2</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Pied de page&nbsp;1</td>
<td>Pied de page&nbsp;2</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cellule&nbsp;1</td>
<td>Cellule&nbsp;2</td>
</tr>
…
</tbody>
</table>

haut de la page

Types de tableaux

Tableaux de mise en page

• Les tableaux de mise en page sont acceptables dans les règles WCAG 2.0, à condition d'utiliser suffisamment de techniques. Nous recommandons toutefois d'utiliser des grilles pour la mise en page du texte.
• Pour les tableaux de mise en page, évitez les éléments <th>, <caption> ou des balises summary contenant des données (voir les échecs F46 et F43 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.1); évitez aussi les balises <tbody>, <colgroup>, <tfoot> et <thead>.
• Les tableaux de mise en page n'utilisent que les balises les plus simples : <table>, <tr> et <td>.
• Les tableaux de mise en page doivent rester intelligibles s'ils sont linéarisés (voir la technique suffisante G57 et l'échec F49 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.2). Le contenu d'un tableau linéarisé est lu en ordre (à partir de la première cellule, puis de gauche à droite et de haut en bas) par les lecteurs d'écran. Ce contenu doit rester intelligible s'il est lu par rangée, et il doit comporter les éléments structurels nécessaires, comme des balises de paragraphe, des en-têtes et des listes.

haut de la page

Tableaux simples

• Un tableau simple comprend une seule rangée (la première) servant d'en-tête de colonnes (<th>), une seule colonne (la première) servant d'en-tête de rangée (<th>), ou les deux.
• Un tableau simple doit avoir un titre (balise <caption>) (voir la technique suffisante H39 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.1).
• Associez les cellules de données aux cellules d'en-tête appropriées par l'attribut scope="col" pour les en-têtes de colonnes (<th>) et l'attribut scope="row" pour les en-têtes de rangées (<th>) (voir la technique H63 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.1).
• Évitez d'utilisez l'attribut scope dans les cellules de données (<td>). Cet usage est déconseillé (site en anglais seulement).
• Évitez d'imbriquer des balises <p> dans les balises <th> (<th><p>En-tête</p></th>), car la page échouera alors l'étape de validation.

Exemple

Tableau dont la première rangée sert d'en-tête

Code :

<table class="lined">
<caption>Tableau dont la première rangée sert d'en-tête</caption>
<tr>
<th scope="col">En-tête&nbsp;1 (<code>&lt;th&gt;</code>)</th>
<th scope="col">En-tête&nbsp;2 (<code>&lt;th&gt;</code>)</th>
<th scope="col">En-tête&nbsp;3 (<code>&lt;th&gt;</code>)</th>
</tr>
<tr>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
</tr>
<tr>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
</tr>
</table>

Résultat :

Tableau dont la première rangée sert d'en-tête

En-tête 1 (<th>)	En-tête 2 (<th>)	En-tête 3 (<th>)
Cellule de données (<td>)	Cellule de données (<td>)	Cellule de données (<td>)
Cellule de données (<td>)	Cellule de données (<td>)	Cellule de données (<td>)

---

Tableau dont la première colonne sert d'en-tête

Code :

<table class="lined">
<caption>
Tableau dont la première colonne sert d'en-tête
</caption>
<tr>
<th scope="row">En-tête&nbsp;1 (<code>&lt;th&gt;</code>)</th>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
</tr>
<tr>
<th scope="row">En-tête&nbsp;2 (<code>&lt;th&gt;</code>)</th>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
</tr>
<tr>
<th scope="row">En-tête&nbsp;3 (<code>&lt;th&gt;</code>)</th>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
<td>Cellule de données (<code>&lt;td&gt;</code>)</td>
</tr>
</table>

Résultat :

Tableau dont la première colonne sert d'en-tête

En-tête 1 (<th>)	Cellule de données (<td>)	Cellule de données (<td>)
En-tête 2 (<th>)	Cellule de données (<td>)	Cellule de données (<td>)
En-tête 3 (<th>)	Cellule de données (<td>)	Cellule de données (<td>)

---

Tableau dont la première colonne et la première rangée servent d'en-têtes

Code :

<table class="lined">
<caption>
Tableau dont la première colonne et la première rangée servent d'en-têtes
</caption>
<tr>
<td></td>
<th scope="col">En-tête&nbsp;1A (&lt;th&gt;)</th>
<th scope="col">En-tête&nbsp;2A (&lt;th&gt;)</th>
</tr>
<tr>
<th scope="row">En-tête&nbsp;1B (&lt;th&gt;)</th>
<td>Cellule de données (&lt;td&gt;)</td>
<td>Cellule de données (&lt;td&gt;)</td>
</tr>
<tr>
<th scope="row">En-tête&nbsp;2B (&lt;th&gt;)</th>
<td>Cellule de données (&lt;td&gt;)</td>
<td>Cellule de données (&lt;td&gt;)</td>
</tr>
</table>

Résultat :

Tableau dont la première colonne et la première rangée servent d'en-têtes

	En-tête 1A (<th>)	En-tête 2A (<th>)
En-tête 1B (<th>)	Cellule de données (<td>)	Cellule de données (<td>)
En-tête 2B (<th>)	Cellule de données (<td>)	Cellule de données (<td>)

haut de la page

Tableaux complexes

• Un tableau complexe comporte habituellement plus d'une rangée ou colonne d'en-tête.
• Un tableau complexe doit avoir un titre (balise <caption>) (voir la technique suffisante H39 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.1).
• Pour associer cellules et en-têtes, ajoutez la balise id aux cellules d'en-tête (<th>) et la balise headers aux cellules de données (<td>) (voir les techniques H51 et H43 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 1.3.1).
  
  Conseil : vérifiez les associations de cellules à l'aide de l'outil Complex Data Table Markup Toolbar (Vision Australia, en anglais seulement).
• Les attributs de cellules d'un même tableau (balise id) doivent être uniques (voir la technique suffisante H93 pour les WCAG 2.0 [en anglais seulement] afin de satisfaire au critère de succès 4.1.1).
• Évitez d'imbriquer des balises <p> dans les balises <th> (<th><p>En-tête</p></th>), car la page échouera alors l'étape de validation.
• Si le tableau compte plusieurs cellules d'en-tête (<th>), pensez à utiliser les classes suivantes :
  • <th class="normal"> — supprime le gras
  • <th class="background-white"> — fond blanc
  • <th class="normal background-white"> — supprime le gras, fond blanc
• Remarque — Si une cellule d'en-tête (<th>) dont le fond est blanc comporte une note, le fond de la cellule des notes sera gris, et vice-versa : si une cellule d'en-tête dont le fond est gris comporte une note, le fond de la cellule des notes sera blanc.

Exemple

Code :

<table class="lined">
<caption>Frais d'utilisation et dépenses réglementaires</caption>
<tr>
<td rowspan="2"></td>
<th id="kc1" colspan="3"><span class="noWrap">2011-2012</span></th>
<th id="kc2" colspan="3">Années de planification</th>
</tr>
<tr>
<th headers="kc1" id="kc3">Prévision des revenus<br>(en milliers de dollars)</th>
<th headers="kc1" id="kc4">Revenus réels<br>(en milliers de dollars)</th>
<th headers="kc1" id="kc5">Coût total<br>(en milliers de dollars)</th>
<th headers="kc2" id="kc6">Exercice</th>
<th headers="kc2" id="kc7">Prévision des revenus<br>(en milliers de dollars)</th>
<th headers="kc2" id="kc8">Coût total estimatif <br>(en milliers de dollars)</th>
</tr>
<tr class="alignCenter">
<th id="kr1" rowspan="3">Total RADIOCOM (licences nouvelles, modifiées et renouvellements)</th>
<td headers="kc1 kr1 kc3" rowspan="3">264&nbsp;000</td>
<td headers="kc1 kr1 kc4" rowspan="3">266&nbsp;481</td>
<td headers="kc1 kr1 kc5" rowspan="3">95&nbsp;832</td>
<th headers="kc2 kr1 kc6" id="kr2">2012-2013</th>
<td headers="kc2 kr1 kr2 kc7">281&nbsp;038</td>
<td headers="kc2 kr1 kr2 kc8">99&nbsp;909</td>
</tr>
<tr class="alignCenter">
<th headers="kr1 kc2 kc6" id="kr3">2013-2014</th>
<td headers="kr1 kr3 kc2 kc7">286&nbsp;038</td>
<td headers="kr1 kr3 kc2 kc8">98&nbsp;620</td>
</tr>
<tr class="alignCenter">
<th headers="kr1 kc2 kc6" id="kr4">2014-2015</th>
<td headers="kr1 kr4 kc2 kc7">286&nbsp;038</td>
<td headers="kr1 kr4 kc2 kc8">96&nbsp;399</td>
</tr>
</table>

Résultat :

Frais d'utilisation et dépenses réglementaires

	2011-2012			Années de planification
	Prévision des revenus (en milliers de dollars)	Revenus réels (en milliers de dollars)	Coût total (en milliers de dollars)	Exercice	Prévision des revenus (en milliers de dollars)	Coût total estimatif (en milliers de dollars)
Total RADIOCOM (licences nouvelles, modifiées et renouvellements)	264 000	266 481	95 832	2012-2013	281 038	99 909
				2013-2014	286 038	98 620
				2014-2015	286 038	96 399