Un tableau structuré

Parent Previous Next


Un tableau structuré



Nous avons appris à construire des petits tableaux simples. Ces petits tableaux suffisent dans la plupart des cas, mais il arrivera que vous ayez besoin de réaliser des tableaux plus… complexes.

Nous allons découvrir deux techniques particulières :




Diviser un gros tableau

Si votre tableau est assez gros, vous aurez tout intérêt à le découper en plusieurs parties. Pour cela, il existe des balises HTML qui permettent de définir les trois « zones » du tableau :

Que mettre dans le pied de tableau ? Généralement, si c'est un long tableau, vous y recopiez les cellules d'en-tête. Cela permet de voir, même en bas du tableau, à quoi se rapporte chacune des colonnes. Schématiquement, un tableau en trois parties se découpe donc comme illustré à la figure suivante.

Un tableau découpé en plusieurs parties



C'est un peu déroutant mais il est conseillé d'écrire les balises dans l'ordre suivant :

  1. <thead>
  2. <tfoot>
  3. <tbody>

Dans le code, on renseigne donc d'abord la partie du haut, ensuite la partie du bas, et enfin la partie principale (<tbody>). Le navigateur se chargera d'afficher chaque élément au bon endroit, ne vous inquiétez pas.

Voici donc le code à écrire pour construire le tableau en trois parties :


<table>

   <caption>Passagers du vol 377</caption>

 

   <thead> <!-- En-tête du tableau -->

       <tr>

           <th>Nom</th>

           <th>Âge</th>

           <th>Pays</th>

       </tr>

   </thead>

 

   <tfoot> <!-- Pied de tableau -->

       <tr>

           <th>Nom</th>

           <th>Âge</th>

           <th>Pays</th>

       </tr>

   </tfoot>

 

   <tbody> <!-- Corps du tableau -->

       <tr>

           <td>Carmen</td>

           <td>33 ans</td>

           <td>Espagne</td>

       </tr>

       <tr>

           <td>Michelle</td>

           <td>26 ans</td>

           <td>États-Unis</td>

       </tr>

       <tr>

           <td>François</td>

           <td>43 ans</td>

           <td>France</td>

       </tr>

       <tr>

           <td>Martine</td>

           <td>34 ans</td>

           <td>France</td>

       </tr>

       <tr>

           <td>Jonathan</td>

           <td>13 ans</td>

           <td>Australie</td>

       </tr>

       <tr>

           <td>Xu</td>

           <td>19 ans</td>

           <td>Chine</td>

       </tr>

   </tbody>

</table>

Il n'est pas obligatoire d'utiliser ces trois balises (<thead><tbody><tfoot>) dans tous les tableaux. En fait, vous vous en servirez surtout si votre tableau est assez gros et que vous avez besoin de l'organiser plus clairement. 
Pour les « petits » tableaux, vous pouvez garder sans problème l'organisation plus simple que nous avons vue au début. Pensez quand même aux robots qui ont besoin de savoir....


3, 2, 1… Fusioooon !


Dans certains tableaux complexes, vous aurez besoin de « fusionner » des cellules entre elles.
Un exemple de fusion ? Regardez le tableau à la figure suivante, qui dresse une liste de films et indique à qui ils s'adressent.

Un tableau contenant des titres de films et leur public



Pour le dernier film, vous voyez que les cellules ont été fusionnées : elles ne font plus qu'une. C'est exactement l'effet qu'on cherche à obtenir.

Pour effectuer une fusion, on rajoute un attribut à la balise <td>. Il faut savoir qu'il existe deux types de fusion :


On utilisera l'attribut colspan.


On utilisera l'attribut rowspan.


Comme vous le savez, vous devez donner une valeur à l'attribut (que ce soit colspan ou rowspan). Il faut indiquer le nombre de cellules à fusionner entre elles. Dans notre exemple, nous avons fusionné deux cellules : celle de la colonne « Pour enfants ? » et celle de « Pour adolescents ? ». On devra donc écrire :


<td colspan="2">

… qui signifie : « Cette cellule est la fusion de deux cellules ». Il est possible de fusionner plus de cellules à la fois (trois, quatre, cinq… autant que vous voulez).

Voilà le code HTML qui me permet de réaliser la fusion correspondant au tableau précédent :

<table>

   <tr>

       <th>Titre du film</th>

       <th>Pour enfants ?</th>

       <th>Pour adolescents ?</th>

   </tr>

   <tr>

       <td>Massacre à la tronçonneuse</td>

       <td >Non, trop violent</td>

       <td>Oui</td>

   </tr>

   <tr>

       <td>Les bisounours font du ski</td>

       <td>Oui, adapté</td>

       <td>Pas assez violent...</td>

   </tr>

   <tr>

       <td>Lucky Luke, seul contre tous</td>

       <td colspan="2">Pour toute la famille !</td>

   </tr>

</table>


Une remarque importante : vous voyez que la ligne 19 ne contient que deux cellules au lieu de trois (il n'y a que deux balises <td>). C'est tout à fait normal car j'ai fusionné les deux dernières cellules entre elles. Le <td colspan="2"> indique que cette cellule prend la place de deux cellules à la fois.

Et pour la fusion verticale avec rowspan, on fait comment ?

Cela se complique un petit peu. Pour notre exemple, nous allons « inverser » l'ordre de notre tableau : au lieu de mettre les titres de films à gauche, on va les placer en haut.
C'est une autre façon de voir le tableau : au lieu de le construire en hauteur, on peut le construire en longueur.

Dans ce cas, le colspan n'est plus adapté, c'est un rowspan qu'il faut utiliser :


<table>

   <tr>

       <th>Titre du film</th>

       <td>Massacre à la tronçonneuse</td>

       <td>Les bisounours font du ski</td>

       <td>Lucky Luke, seul contre tous</td>

   </tr>

   <tr>

       <th>Pour enfants ?</th>

       <td>Non, trop violent</td>

       <td>Oui, adapté</td>

       <td rowspan="2">Pour toute la famille !</td>

   </tr>

   <tr>

       <th>Pour adolescents ?</th>

       <td>Oui</td>

       <td>Pas assez violent...</td>

   </tr>

</table>

Résultat : les cellules sont fusionnées verticalement (figure suivante) !

Les cellules ont été fusionnées verticalement


Notez qu'on peut modifier l'alignement vertical du texte des cellules de tableaux avec la propriété vertical-align que nous avons découverte dans le chapitre sur la mise en page.


En résumé



Créé avec HelpNDoc Personal Edition: Outils facile d'utilisation pour créer des aides HTML et des sites web