<hier>WEBLOG</hier>

Dimanche 10 février 2008 | link |

Naaaannn, je ne parlerai pas du site not-to-be.com-mercial (à moins que ce soit .com-érages). Non, ne comptez pas sur moi.

Je dirai juste que tous les sites, quels qu'ils soient, qui oseront utiliser mon identité (ou celle de mon site) à des fins mercantiles et/ou polémiques, et ce sans m'en avoir demandé l'autorisation préalable (que, bien entendu, ils ne peuvent obtenir dans ce contexte) se verront crucifier, exploser, atomiser, ventiler façon puzzle !

Pour mémoire, un morpion s'y est déjà essayé, paix à son âme... Ce n'est pas un jeune loup aux dents longues qui va me faire changer de principe. Non, mais. (Pour qui qu'y se prend c'ui là ?)

Comportements du <caption> des <table>

La balise <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>
 <thead>
 <tr>
  <th>Nom</th>
  <th>Ponctualité et assiduité</th>
  <th>Possession du matériel</th>
  <th>Motivation et participation</th>
  <th>Moyenne</th>
 </tr>
 </thead>
 <tbody>
 <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>
 </tbody>
</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) :

Voir l'exemple

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

Voir l'exemple

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

Voir l'exemple

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

Voir l'exemple

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 summary qui 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.

| Laisser un commentaire |

| Index | Avant | Archives |

---