<caption> sert à indiquer une légende à un tableau.Elle doit être placée juste après la balise ouvrante
<table> et doit être unique.
Comme l'indique ce schéma des spécifications CSS 2.1, les marges du caption et de la table sont indépendantes.
image : http://www.w3.org/TR/CSS21/tables.html#model
Par défaut, la légende est placée au dessus (top) du tableau. Mais on peut la placer aussi en dessous (bottom).
Là où il peut y avoir confusion, c'est que les normes CSS2 indiquaient que caption pouvait prendre les attributs top | bottom | left | right. En fait, les alignements left | right ne semblent avoir été implémentés que par Firefox.
En effet, ces deux positionnements posent de gros problèmes d'implémentation dans les navigateurs, elles n'apparaissent donc plus dans les spécifications des CSS 2.1 (merci Daniel pour l'explication ;-) )
Code (x)html d'un tableau
<table border="1" summary="Notes attribuée pour les critères de ponctualité, de possession du matériel et la motivation d'élèves de la classe de 3ème à découverte professionnelle 6 heures"> <caption><span>Tab1.</span> Evaluation du comportement d'élèves de 3DP6</caption> <tr> <th>Nom</th> <th>Ponctualité et assiduité</th> <th>Possession du matériel</th> <th>Motivation et participation</th> <th>Moyenne</th> </tr> <tr> <th>Sophie Delacnil</th> <td>18/20</td> <td>20/20</td> <td>16/20</td> <td>18/20</td> </tr> <tr> <th>Stéphane Lasticot</th> <td>16/20</td> <td>8/20</td> <td>0/20</td> <td>8/20</td> </tr> <tr> <th>Anne-François de Montrou</th> <td>5/20</td> <td>15/20</td> <td>7/20</td> <td>9/20</td> </tr> <tr> <th>Philippe Colation</th> <td>16/20</td> <td>6/20</td> <td>14/20</td> <td>12/20</td> </tr> </table>
Par défaut, l'apparence de ce tableau sera le suivant (le code CSS de ce tableau est indiqué sur la page d'aperçu) :
Légende en bas et tableau centrés sur la page
Pas la peine d'espérer avec MSIE (même 7), caption-side n'est pas implémenté du tout.
Pour centrer le tableau et la légende, on prendra soin de rajouter un margin:auto à caption pour Firefox ou autre produit mozilla. Sinon, pour indiquer que la légende doit se situer en bas de tableau, c'est tout simplement caption-side:bottom
Code CSS
(A rajouter au code initial)
table, caption {
margin:auto;
}
caption {
caption-side:bottom
}
Résultat attendu
Légende à gauche
On peut tout de même s'interesser de plus près au comportement de Firefox.
Le code CSS2 suivant permet donc de placer la légende en haut à gauche du tableau. Les autres navigateurs ne comprenant pas l'attribut left ou right, seul l'alignement du texte (ici à droite), sera interprété.
Code CSS
table {
margin:auto;
}
caption {
caption-side:left;
text-align:right;
}
Résultat attendu
Légende en bas à droite du tableau
Pour obtenir un positionnnement à droite et en bas, on utilisera l'attribut vertical-align:bottom
Code CSS
table {
margin:auto;
}
caption {
caption-side:right;
vertical-align:bottom;
text-align:left;
}
Résultat attendu
Remarques sur l'accessibilité
- Indiquer une légende à un tableau fait partie des "bonnes pratiques" recommandées en matière d'accessibilité. Cela dit, pour être parfaitement accessible, un tableau devra aussi comporter l'attribut
summaryqui doit contenir une explication détaillée du contenu du tableau. - On utilise les balises
<th>pour les cellules d'en-tête et non pour centrer le texte ! (qui est la mise en forme par défaut). Le reste des données étant balisées par<td> - Pour être plus que parfait, on peut aussi renseigner le contenu des cellules d'en-têtes par l'attribut
abbr.
