Apprenez à créer votre site web avec HTML5 et CSS3
Last updated on Wednesday, October 22, 2014
  • 4 semaines
  • Facile

Ce cours est visible gratuitement en ligne.

Videos available in this course

Paperback available in this course

Ce cours existe en eBook.

Certificate of achievement available at the end this course

Got it!

Les tableaux

Indispensables pour organiser les informations, les tableaux sont un petit peu délicats à construire en HTML : cela explique que je vous les présente seulement maintenant. Il va en effet falloir imbriquer de nouvelles balises HTML dans un ordre précis.

Nous allons commencer par construire des tableaux basiques, puis nous les complexifierons au fur et à mesure : fusion de cellules, division en multiples sections… Nous découvrirons aussi les propriétés CSS liées aux tableaux, qui nous permettront de personnaliser leur apparence.

Un tableau simple

La première balise à connaître est <table> </table>. C'est cette balise qui permet d'indiquer le début et la fin d'un tableau.

Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe. Exemple :

<p>Ceci est un paragraphe avant le tableau.</p>

<table>
   <!-- Ici, on écrira le contenu du tableau -->
</table>

<p>Ceci est un paragraphe après le tableau.</p>

Bon, et qu'est-ce qu'on écrit à l'intérieur du tableau ?

Là, préparez-vous à subir une avalanche de nouvelles balises.
Pour commencer en douceur, voici deux nouvelles balises très importantes :

  • <tr> </tr> : indique le début et la fin d'une ligne du tableau ;

  • <td> </td> : indique le début et la fin du contenu d'une cellule.

En HTML, un tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le contenu des différentes cellules (<td>).
Schématiquement, un tableau se construit comme à la figure suivante.

Un tableau, avec des cellules contenues dans des lignes
Un tableau, avec des cellules contenues dans des lignes

On a une balise de ligne (<tr>) qui englobe un groupe de cellules (<td>).
Par exemple, si je veux faire un tableau à deux lignes, avec trois cellules par ligne (donc trois colonnes), je devrai taper ceci :

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

Le résultat est un peu déprimant (figure suivante).

Un tableau sans bordures
Un tableau sans bordures

C'est un tableau ça ?
Le texte s'est écrit à la suite et il n'y a même pas de bordures !

Oui, un tableau sans CSS paraît bien vide. Et justement, rajouter des bordures est très simple, vous connaissez déjà le code CSS correspondant !

td /* Toutes les cellules des tableaux... */
{
    border: 1px solid black; /* auront une bordure de 1px */
}

Et voici le résultat à la figure suivante.

Chaque cellule a sa propre bordure
Chaque cellule a sa propre bordure

Hum, ce n'est pas encore aussi parfait que ce qu'on voudrait. En effet, on aimerait qu'il n'y ait qu'une seule bordure entre deux cellules, or ce n'est pas le cas ici.

Heureusement, il existe une propriété CSS spécifique aux tableaux, border-collapse, qui signifie « coller les bordures entre elles ».
Cette propriété peut prendre deux valeurs :

  • collapse : les bordures seront collées entre elles, c'est l'effet qu'on recherche ici ;

  • separate : les bordures seront dissociées (valeur par défaut)

table
{
    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}
td
{
    border: 1px solid black;
}

La figure suivante représente le résultat obtenu.

Les bordures sont collées les unes aux autres
Les bordures sont collées les unes aux autres

Voilà qui est mieux !

La ligne d'en-tête

Maintenant que l'on a ce qu'on voulait, on va rajouter la ligne d'en-tête du tableau. Dans l'exemple ci-dessous, les en-têtes sont « Nom », « Âge » et « Pays ».
La ligne d'en-tête se crée avec un <tr> comme on l'a fait jusqu'ici, mais les cellules qu'elle contient sont, cette fois, encadrées par des balises <th> et non pas <td> !

<table>
   <tr>
       <th>Nom</th>
       <th>Âge</th>
       <th>Pays</th>
   </tr>

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

La ligne d'en-tête est très facile à reconnaître pour deux raisons :

  • les cellules sont des <th> au lieu des <td> habituels ;

  • c'est la première ligne du tableau (c'est idiot, mais encore faut-il le préciser).

Comme le nom des cellules est un peu différent pour l'en-tête, il faut penser à mettre à jour le CSS pour lui dire d'appliquer une bordure sur les cellules normales et sur l'en-tête (figure suivante).

table
{
    border-collapse: collapse;
}
td, th /* Mettre une bordure sur les td ET les th */
{
    border: 1px solid black;
}
Un tableau avec un en-tête
Un tableau avec un en-tête

Comme vous pouvez le constater, votre navigateur a mis en gras le texte des cellules d'en-tête. C'est ce que font en général les navigateurs mais, si vous le désirez, vous pouvez changer cela à coups de CSS : modifier la couleur de fond des cellules d'en-tête, leur police, leur bordure, etc.

Titre du tableau

Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau.
Notre exemple est constitué d'une liste de personnes… oui mais alors ? Qu'est-ce que cela représente ? Sans titre de tableau, vous le voyez, on est un peu perdu.

Heureusement, il y a <caption> !
Cette balise se place tout au début du tableau, juste avant l'en-tête. C'est elle qui contient le titre du tableau (figure suivante) :

<table>
   <caption>Passagers du vol 377</caption>

   <tr>
       <th>Nom</th>
       <th>Âge</th>
       <th>Pays</th>
   </tr>
   <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>
</table>
Un tableau avec un titre
Un tableau avec un titre

C'est quand même plus clair !

Sachez que vous pouvez changer la position du titre avec la propriété CSS caption-side qui peut prendre deux valeurs :

  • top : le titre sera placé au-dessus du tableau (par défaut) ;

  • bottom : le titre sera placé en dessous du tableau.

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 :

  • Pour les gros tableaux, il est possible de les diviser en trois parties :

    • En-tête ;

    • Corps du tableau ;

    • Pied de tableau.

  • Pour certains tableaux, il se peut que vous ayez besoin de fusionner des cellules entre elles.

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 :

  • l'en-tête (en haut) : il se définit avec les balises <thead></thead> ;

  • le corps (au centre) : il se définit avec les balises <tbody></tbody> ;

  • le pied du tableau (en bas) : il se définit avec les balises <tfoot></tfoot>.

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

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

    • La fusion de colonnes : c'est ce que je viens de faire dans cet exemple. La fusion s'effectue horizontalement.

On utilisera l'attribut colspan.

    • La fusion de lignes : là, deux lignes seront groupées entre elles. La fusion s'effectuera verticalement.

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
Les cellules ont été fusionnées verticalement

En résumé

  • Un tableau s'insère avec la balise <table> et se définit ligne par ligne avec <tr>.

  • Chaque ligne comporte des cellules <td> (cellules normales) ou <th> (cellules d'en-tête).

  • Le titre du tableau se définit avec <caption>.

  • On peut ajouter une bordure aux cellules du tableau avec border. Pour fusionner les bordures, on utilise la propriété CSS border-collapse.

  • Un tableau peut être divisé en trois sections : <thead> (en-tête), <tbody> (corps) et <tfoot> (bas du tableau). L'utilisation de ces balises n'est pas obligatoire.

  • On peut fusionner des cellules horizontalement avec l'attribut colspan ou verticalement avec rowspan. Il faut indiquer combien de cellules doivent être fusionnées.

Example of certificate of achievement
Example of certificate of achievement

Le téléchargement des vidéos de nos cours est accessible pour les membres Premium. Vous pouvez toutefois les visionner en streaming gratuitement.