Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Titrage des tableaux avec les balises th et caption

Titrage des tableaux avec les balises th et caption

Dans le chapitre précédent, on a juste créé des tableaux simplistes, qui nécessitent d'autres composants, surtout l'étiquetage des colonnes ou des lignes (ou les deux à la fois), ainsi que le titrage du tableau en entier en lui associant une légende.

La balise th (table header)

Les balises 'th' ressemblent énormément aux balises 'td' qu'on vient de voir dans le chapitre précédent. Mais deux particularités supplémentaires d'ordre fond et forme caractérisent les éléments 'th' :

Grâce aux éléments 'th', vous pouvez insérer une ligne supérieure d'en-têtes, une colonne gauche d'entêtes ou les deux à la fois, comme vous pouvez le constater dans l'image suivante :les tableaux XHTML : les balises caption et th

J'ai une bonne nouvelle : il y aura seulement un léger changement en code. Comme ça vous n'aurez pas à mémoriser d'autres balises tableaux et je risquerai pas de recevoir des tonnes de tomates qui vont jaillir de tous les côtés tableaux

Le premier tableau on l'a déjà dressé dans le chapitre précédent. On cherche maintenant à créer les autres. Voici le code respectif des trois tableaux (2, 3, 4) :

Tableau 2 Tableau 3 Tableau4
<table>
 <tr>
  <th scope="row">data</th>
  <td>data</td>
  <td>data</td>
 </tr>
 <tr>
  <th scope="row">data</th>
  <td>data</td>
  <td>data</td>
 </tr>
 <tr>
  <th scope="row">data</th>
  <td>data</td>
  <td>data</td>
 </tr>
 <tr>
  <th scope="row">data</th>
  <td>data</td>
  <td>data</td>
 </tr>
</table>
      

tableaux XHTML : la balise th avec l'attribut scope

<table>
 <tr>
  <th scope="col">data</th>
  <th scope="col">data</th>
  <th scope="col">data</th>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
 </tr>
 <tr>
  <td>data</td>
  <td>data</td>
  <td>data</td>
 </tr>
</table> 
      

tableaux XHTML : la balise th avec l'attribut scope

<table>
 <tr>
  <th scope="col">data</th>
  <th scope="col">data</th>
  <th scope="col">data</th>
 </tr>
 <tr>
  <th scope="row">data</th>
  <td>data</td>
  <td>data</td>
 </tr>
 <tr>
  <th scope="row">data</th>
  <td>data</td>
  <td>data</td>
 </tr>
 <tr>
  <th scope="row">data</th>
  <td>data</td>
  <td>data</td>
 </tr>
</table>
      

tableaux XHTML : la balise th avec l'attribut scope

Remarquez que le code n'a pas beaucoup changé :

La balise caption

Grosso modo, la balise caption permet de définir une légende (titre) au tableau. Celle-ci est placée en haut du tableau par défaut. Vous pouvez agir sur ce rendu visuel par défaut à l'aide des CSS. Notez que vous avez droit à une et une seule légende par tableau. En plus si vous spécifiez une, vous devez la mettre immédiatement après la balise ouvrante <table>.

Code XHTML

<table>
 <caption>La légende du tableau</caption>
 <tr>
<th scope="col">terme</th>
<th scope="col">définition</th>
</tr>
<tr>
<td>étriper</td>
<td>blesser sauvagement</td>
</tr>
</table>

Rendu visuel

La légende du tableau
terme définition
étriper blesser sauvagement

La balise <caption> doit être imbriquée dans l'élément table, et ce juste après le repère d'ouverture <table>, et à l'extérieur des autres balises du tableau (tr, tbody, tfoot et thead). D'autre part vous pouvez incorporer des balises inline dans l'élément caption, par exemple une petite image.

Le respect de la sémantique

Je vois qu'il y a certains d'entre vous qui commencent à se dire pourquoi cet abruti nous fait apprendre des balises inutiles, dont l'effet peut être réalisé autrement. C'est vrai qu'on peut insérer le titre du tableau facilement avec la balise <p> ou <h4> sans recourir à <caption>. Encore je peux marquer les en-têtes du tableau avec par exemple la balise <strong> ou en lui appliquant un style gras.

Certes, ces variantes vont aboutir à la même sortie visuelle. Mais lorsqu'on parle de sémantique, votre code sera interprété comme du charabia surtout par les moteurs de recherche comme Google, et les navigateurs non graphiques, qui eux, n'ont rien à faire de l'aspect visuel de la page.

Si vous structurez bien le contenu de votre document, Google n'aura pas du mal à bien référencer votre site, car il va facilement appréhender vos tableaux. Ce qui peut se traduire par un bon positionnement. Donc n'oubliez pas de bien donner du sens au contenu que vous tapez.

En fonction du sens des balises XHTML le comportement des moteurs de recherche et des navigateurs peut changer. A titre d'exemple Google donnera plus d'importance à une légende introduite par la balise 'caption' que par l'élément 'p'. Les lecteurs d'écran peuvent restituer les en-têtes et les légendes de tableaux avec une voie plus prononcée, que celle des cases traditionnelles. Ce qui rendra les tableaux plus accessibles à l'audience non-voyante.

Règles d'imbrication des balises caption et th

La balise 'th' ne peut être placée que dans l'élément XHTML 'tr'. Par contre elle peut englober n'importe quel élément XHTML en-ligne ou remplac, au même titre que son homologue 'td'.

La balise caption ne peut être imbriquée que dans l'élément XHTML table, et ne peut recevoir que des données textuelles et éléments en-ligne (<!ELEMENT caption %Inline;>).

La différence entre les balises caption et th

En fait les balises 'caption' et 'th' permettent d'étiqueter les tableaux, mais elles divergent sur certains points :

Dans le chapitre suivant, on va apprendre à créer des tableaux d'enfer tableaux avancés avec les balises de regroupement de rangées : thead, tbody et tfoot.

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau