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)

• La balise caption

• Le respect de la sémantique

• Règles d'imbrication des balises caption et th

• La différence entre les balises caption et th

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' :

• donnée d'ordre fond ou sémantique : les éléments 'th' permettent de marquer les en-têtes des tableaux ;
• donnée d'ordre forme ou sortie visuelle : les navigateurs restituent généralement les en-têtes d'un tableau en gras. Ceci ne signifie pas pour autant que la balise 'th' permet de mettre en gras une case de tableau. Mais c'est une façon adoptée par les navigateurs pour mettre en exergue les en-têtes du tableau.

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 :

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 et je risquerai pas de recevoir des tonnes de tomates qui vont jaillir de tous les côtés

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) :

<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>
      

<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> 
      

<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>
      

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

• chaque cellule d'en-tête est introduite à l'aide des deux balises : <th></th> (table header). Notez que ces balises sont aussi imbriquées dans l'élément 'tr'.
• les balises d'en-tête peuvent être accompagnées par l'attribut facultatif 'scope' qui précise s'il s'agit d'un en-tête de ligne ou de colonne. Celui-ci n'est pas obligatoire, mais il est très important pour donner plus de sémantique à votre document, et faciliter aux agents utilisateurs de comprendre facilement la structure et les relations existant entre les cellules des tableaux.
• la plupart des navigateurs mettent en gras et centrent le contenu des cellules introduites par <th>. Vous pouvez quand même changer cet aspect si vous jugez qu'il est insuffisant pour la mise en relief de vos en-têtes (mise en forme des tableaux avec les propriétés CSS).
• c'est vrai que vous pouvez mettre les balises <th> n'importe où dans le tableau (au milieu, dans la partie droite ou inférieure), mais je vous recommande de respecter ces trois schémas proposés par le Dreamweaver, car un en-tête doit être avant tout placé soit en haut, soit à gauche ou dans les deux bords gauche et supérieur. Si vous écrivez en arabe, ou toute autre longue qui s'écrit de droite à gauche, ça serait le raisonnement inverse : une ligne supérieure d'en-têtes, une colonne droite d'entêtes ou les deux à la fois.

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 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 :

• la balise caption est unique et s'applique à tout le tableau. La balise 'th' s'applique à toute une colonne ou ligne (et parfois les deux) ;
• l'élément caption ne peut contenir que du texte ou éléments XHTML en-ligne remplacés ou non. La balise 'th' peut encadrer n'importe quel élément qu'il soit de type en-ligne ou bloc ;
• le contenu de la légende échappe au quadrillage du tableau, contrairement aux en-têtes qui sont compris au sein du tableau.

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.