Les tableaux

Un tableau simple

La balise qui permet d'indiquer le début et la fin d'un tableau est <table> </table>.

Il faut absolument la placer dans un paragraphe, du fait que c'est une balise de type bloc.

Voici un exemple d'utilisation:

1 <p>Ceci est un paragraphe avant le tableau.</p> 2 3 <table> 4 <!-- Ici, on écrira le contenu du tableau --> 5 </table> 6 7 <p>Ceci est un paragraphe après le tableau.</p>

À l'intérieur de cette dernière, on intègre par exemple les balises:

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

Pour faire un tableau en HTML, il faut le construire ligne par ligne, dans chacune il faut indiquer le contenu des différentes cellules, ce qui donne schématiquement:

Si on veut faire un tableau à deux lignes, avec trois cellules par ligne (donc trois colonnes), on devra taper ceci:

1 <table> 2 <tr> 3 <td>Carmen</td> 4 <td>33 ans</td> 5 <td>Espagne</td> 6 </tr> 7 8 <tr> 9 <td>Michelle</td> 10 <td>26 ans</td> 11 <td>États-Unis</td> 12 </tr> 13 </table>

Plus qu'à rajouter les bordures, et on sait déjà comment faire:

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

On s'aperçoit que les bordures sont décollées, pour y remédier, il faut utiliser la propriété border +

• collapse: les bordures seront collées entre elles;
• separate: les bordures seront dissociées (valeur par défaut)

1 table 2 { 3 border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */ 4 } 5 6 td /* Toutes les cellules des tableaux... */ 7 { 8 border: 1px solid black; 9 }

Haut

La ligne d'en-tête

Maintenant on va ajouter la ligne d'en-tête.

Pour la créer on commence par la balise <tr> (comme vu précédemment) sauf que pour les cellules on va utiliser <th> au lieu de <td>.

1 <table> 2 <tr> 3 <th>Nom</th> 4 <th>Âge</th> 5 <th>Pays</th> 6 </tr> 7 8 <tr> 9 <td>Carmen</td> 10 <td>33 ans</td> 11 <td>Espagne</td> 12 </tr> 13 14 <tr> 15 <td>Michelle</td> 16 <td>26 ans</td> 17 <td>États-Unis</td> 18 </tr> 19 </table>

Il ne faut pas oublier d'adapter son CSS.

1 table 2 { 3 border-collapse: collapse; 4 } 5 6 td, th /* Mettre une bordure sur les td ET les th */ 7 { 8 border: 1px solid black; 9 }

Haut

Titre du tableau

Normalement, tout tableau doit avoir un titre, il permet de renseigner rapidement le visiteur sur le contenu.

Pour le mettre en pratique, on va utiliser la balise <caption> </caption>.

1 <table> 2 <caption>Passagers du vol 377</caption> 3 4 <tr> 5 <th>Nom</th> 6 <th>Âge</th> 7 <th>Pays</th> 8 </tr> 9 10 <tr> 11 <td>Carmen</td> 12 <td>33 ans</td> 13 <td>Espagne</td> 14 </tr> 15 16 <tr> 17 <td>Michelle</td> 18 <td>26 ans</td> 19 <td>États-Unis</td> 20 </tr> 21 </table>

En ce qui concerne le CSS pour le titre, on va utiliser la propriété caption-side +

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

Haut

Un tableau structuré

Il y a 2 techniques particulières qu'on va voir ici:

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

Haut

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

Pour un long tableau, on va recopier les cellules d'en-tête dans le pied du tableau, de façon à ne pas être perdu à la fin du tableau.

Schématiquement, un tableau en trois parties se découpe donc comme ceci:

Il est fortement conseillé de renseigner d'abord la partie du haut, ensuite la partie du bas, et enfin la partie principale, dans cet ordre: (le navigateur se chargera d'afficher chaque élément au bon endroit)

1. thead
2. tfoot
3. tbody

Voici le code pour notre tableau:

1 <table> 2 <caption>Passagers du vol 377</caption> 3 4 <thead> <!-- En-tête du tableau --> 5 <tr> 6 <th>Nom</th> 7 <th>Âge</th> 8 <th>Pays</th> 9 </tr> 10 </thead> 11 12 <tfoot> <!-- Pied du tableau --> 13 <tr> 14 <th>Nom</th> 15 <th>Âge</th> 16 <th>Pays</th> 17 </tr> 18 </tfoot> 19 20 <tbody> <!-- Corps du tableau --> 21 <tr> 22 <td>Carmen</td> 23 <td>33 ans</td> 24 <td>Espagne</td> 25 </tr> 26 27 <tr> 28 <td>Michelle</td> 29 <td>26 ans</td> 30 <td>États-Unis</td> 31 </tr> 32 33 <tr> 34 <td>François</td> 35 <td>43 ans</td> 36 <td>France</td> 37 </tr> 38 39 <tr> 40 <td>Martine</td> 41 <td>34 ans</td> 42 <td>France</td> 43 </tr> 44 45 <tr> 46 <td>Jonathan</td> 47 <td>13 ans</td> 48 <td>Australie</td> 49 </tr> 50 51 <tr> 52 <td>Xu</td> 53 <td>19 ans</td> 54 <td>Chine</td> 55 </tr> 56 </tbody> 57 </table>

À savoir que les balises qu'on vient de voir ne sont pas obligatoires dans tous les tableaux, c'est uniquement valable pour les tableaux longs, les petits ne les nécessitant pas forcément.

Haut

3, 2, 1… Fusioooon !

Parfois il y aura la nécessité de fusionner quelques cellules, comme par exemple pour le dernier film de ce tableau:

Pour se faire, on va utiliser td +

• colspan pour la fusion de colonnes : la fusion s'effectue horizontalement.
• rowspan pour la fusion de lignes : la fusion s'effectuera verticalement.

Ensuite, il faut préciser le nombre de cellules à fusionner entre elles, comme ceci:

1 <td colspan="2">

Ce qui donne dans le code HTML de base:

1 <table> 2 <tr> 3 <th>Titre du film</th> 4 <th>Pour enfants ?</th> 5 <th>Pour adolescents ?</th> 6 </tr> 7 8 <tr> 9 <td>Massacre à la tronçonneuse</td> 10 <td>Non, trop violent</td> 11 <td>Oui</td> 12 </tr> 13 14 <tr> 15 <td>Les bisounours font du ski</td> 16 <td>Oui, adapté</td> 17 <td>Pas assez violent...</td> 18 </tr> 19 20 <tr> 21 <td>Lucky Luke, seul contre tous</td> 22 <td colspan="2">Pour toute la famille !</td> 23 </tr> 24 </table>

En ce qui concerne rowspan, ce n'est pas tout à fait pareil que colspan. On va poursuivre via notre exemple, mais pour ça il faut inverser l'ordre du tableau, au lieu de mettre les titres de films à gauche, on va les placer en haut:

1 <table> 2 <tr> 3 <th>Titre du film</th> 4 <td>Massacre à la tronçonneuse</td> 5 <td>Les bisounours font du ski</td> 6 <td>Lucky Luke, seul contre tous</td> 7 </tr> 8 9 <tr> 10 <th>Pour enfants ?</th> 11 <td>Non, trop violent</td> 12 <td>Oui, adapté</td> 13 <td rowspan="2">Pour toute la famille !</td> 14 </tr> 15 16 <tr> 17 <th>Pour adolescents ?</th> 18 <td>Oui</td> 19 <td>Pas assez violent...</td> 20 </tr> 21 </table>

Pour aligner verticalementle texte des cellules du tableau, il faut utiliser la propriété vertical-align, qu'on a déjà vu dans le chapitre concernant les autres techniquesde mise en page.

Haut