Un tableau simple

Parent Previous Next

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'écrit-on à 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 :

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



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

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



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 :

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



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 :

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



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



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 :


Créé avec HelpNDoc Personal Edition: Produire des livres Kindle gratuitement