Aller au menu - Aller au contenu

Icône Les tableaux

Par Avatar Mathieu Nebra (M@teo21)
Mise à jour : 01/11/2011
Difficulté : Intermédiaire Intermédiaire Creative Commons BY-NC-SA
276 525 visites depuis 7 jours , dont 4 675 sur ce chapitre , classé 1/777
Indispensables pour organiser nos informations, les tableaux sont un petit peu délicats à construire en HTML, ce qui explique que je ne vous les présente que maintenant.

Vous voyez à quoi ressemble un tableau, je ne vous fais pas l'affront de vous en dessiner un ?... Oh et puis si, je vais vous faire cet affront. ;)
Mesdames, mesdemoiselles, messieurs, voici un... tableau !

Nom Age Pays
Anne 27 ans France
Carmen 33 ans Espagne
Michelle 26 ans Etats-Unis
Ogasaku Nyagatosoka 18 ans Japon

C'est un tableau assez basique. Bien entendu, nous apprendrons à faire des tableaux plus complexes afin que vous puissiez réaliser tout ce dont vous avez besoin.
Nous découvrirons aussi les propriétés CSS liées aux tableaux, qui nous permettront de personnaliser leur apparence.
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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 block, il faut donc la placer en dehors d'un paragraphe. Exemple :

Code : HTML
1
2
3
4
5
6
7
<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 à recevoir une avalanche de nouvelles balises. ^^
Pour commencer en douceur, voici 2 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, votre tableau se construit ligne par ligne. Dans chaque ligne (<tr>), on indique le contenu des différentes cellules (<td>).
Schématiquement, notre tableau de tout à l'heure se construit comme ça :

Image utilisateur


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

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<table>
   <tr>
       <td>Carmen</td>
       <td>33 ans</td>
       <td>Espagne</td>
   </tr>
   <tr>
       <td>Michelle</td>
       <td>26 ans</td>
       <td>Etats-Unis</td>
   </tr>
</table>


Le résultat est un peu déprimant :

Un tableau sans bordures


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


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

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


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 2 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 2 valeurs :
  • collapse : les bordures seront collées entre elles, c'est l'effet qu'on recherche.
  • separate : les bordures seront dissociées (valeur par défaut)

Code : CSS
1
2
3
4
5
6
7
8
table
{
    border-collapse: collapse; /* Les bordures du tableau seront collées (plus joli) */
}
td
{
    border: 1px solid black;
}


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 notre exemple, les en-têtes sont "Nom", "Age" et "Pays".
La ligne d'en-tête se crée avec un <tr> comme on a fait jusqu'ici, mais les cellules à l'intérieur sont cette fois des <th> et non pas des <td> !

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<table>
   <tr>
       <th>Nom</th>
       <th>Age</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>Etats-Unis</td>
   </tr>
</table>


La ligne d'en-tête est très facile à reconnaître pour 2 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 :p ).

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 :

Code : CSS
1
2
3
4
5
6
7
8
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 le texte des cellules d'en-tête en gras. C'est ce que font en général les navigateurs, mais si vous le désirez vous pouvez changer ça à coup 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.
Dans notre exemple, on a une liste de personnes... oui mais alors ? Qu'est-ce que ça 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 indique le titre du tableau :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<table>
   <caption>Passagers du vol 377</caption>

   <tr>
       <th>Nom</th>
       <th>Age</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>Etats-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 quatre valeurs :

  • top : le titre sera placé en haut du tableau (par défaut).
  • bottom : le titre sera placé en bas du tableau.
  • left : le titre sera placé à gauche du tableau.
  • right : le titre sera placé à droite du tableau.

Retour en haut

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 2 techniques particulières :
  • Pour les gros tableaux, il est possible de les diviser en 3 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 3 "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. Ca permet de voir même en bas du tableau à quoi se rapporte chacune des colonnes.

Schématiquement, un tableau en 3 parties se découpe donc comme cela :

Image utilisateur


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

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


On met donc dans le code d'abord la partie du haut, ensuite la partie du bas, et enfin la partie principale (<tbody>). Le navigateur se chargera d'afficher les éléments au bon endroit, ne vous inquiétez pas. ;)

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

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<table>
   <caption>Passagers du vol 377</caption>

   <thead> <!-- En-tête du tableau -->
       <tr>
           <th>Nom</th>
           <th>Age</th>
           <th>Pays</th>
       </tr>
   </thead>

   <tfoot> <!-- Pied de tableau -->
       <tr>
           <th>Nom</th>
           <th>Age</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>Etats-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 3 balises (<thead>, <tbody>, <tfoot>) sur son tableau. 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 qu'on a vue au début.


3, 2, 1... Fusioooon !



Sur certains tableaux complexes, vous aurez besoin de "fusionner" des cellules entre elles.
Un exemple de fusion ? Regardez, ce tableau qui liste des films et qui indique à qui ils s'adressent :

Image utilisateur


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

Pour effectuer une fusion, il faut rajouter un attribut à la balise <td>. Il faut savoir qu'il existe 2 types de fusion :
  • La fusion de colonnes : c'est ce que je viens de faire sur 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. Sur notre exemple, on a fusionné deux cellules : celle de la colonne "Pour enfants ?", et celle de "Pour adolescents ?". On devra donc écrire :

Code : HTML
1
<td colspan="2">


... qui signifie : "Cette cellule est la fusion de 2 cellules". Il est possible de fusionner plus de cellules à la fois (3, 4, 5... tant que vous voulez).

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

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<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 dernière ligne ne contient que 2 cellules au lieu de 3 (il n'y a que 2 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 2 cellules à la fois.

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


Ca se complique un petit peu. Pour notre exemple, on va "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 :

Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<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 !

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.
Retour en haut

Q.C.M.

Laquelle de ces balises permet de créer une nouvelle ligne de tableau ?
Quelle balise permet de donner un titre au tableau ?
Laquelle de ces balises ne permet pas de structurer un tableau en 3 parties ?
Un tableau sans CSS possède-t-il des bordures ?
Que permet de faire la propriété caption-side ?
Quelle ligne pose un problème ici ?


Code : HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<table>
<tr>
<th>En-tête 1</th>
<th>En-tête 2</th>
</tr>

<tr> <!-- Ligne A -->
<td>Bla bla</td>
<td>Bli bli</td>
</tr>
<tr> <!-- Ligne B -->
<td colspan="2">Bla bla</td>
<td>Bli bli</td>
</tr>
<tr> <!-- Ligne C -->
<td colspan="2">Bla bla</td>
</tr>
</table>
Dans quel ordre doit-on écrire les balises structurant un tableau en 3 parties ?

Statistiques de réponses au QCM

Retour en haut
Ainsi s'achève notre tour d'horizon des tableaux. La façon de les créer n'est peut-être pas naturelle je reconnais, mais on s'y fait vite.
Du temps que vous ne partez pas en courant parce que vous voyez des noms de balises imprononçables (tr, td, th... :p ), vous avez toutes les chances de vous y habituer en peu de temps.

Je vous conseille surtout de bien vérifier que vos balises s'ouvrent et se ferment dans le bon ordre, c'est très important. Ne mettez par exemple JAMAIS de balise <td> si elle n'est pas entourée d'une balise de ligne <tr>.

Enfin, je vous l'ai déjà dit et je vous le répète : un tableau sans CSS n'est... pas très esthétique. Profitez-en donc pour mettre à l'épreuve vos connaissances en CSS, c'est l'occasion idéale !
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Lire aussi

Icône
Les bases d'Excel
Icône
Les tables de hachage
Icône
Les tableaux
Retour en haut
28 commentaires pour "Les tableaux"
Note moyenne : 3.86 / 4 (2985 votes)
Pseudo Commentaire
Hors ligne Yoshaaa # Posté le 17/11/2011 à 22:11:21

J'ai appliqué le tuto à lettre pour un site que j'ai crée pour un ami, ça m'a vraiment bien servi pour les petits tableaux. Vous pouvez les voir sur la page d'accueil (en bas) http://www.thermesdelawoluwe.be/ et aussi la page "prestation et tarifs". J'ai réalisé le site sous blogger et c'est plutôt sympa comme résultat. Par contre j'avais eu du mal pour trouver le code CSS exacte permettant de centrer le tableau, alors pour ceux qui cherche... Celui-ci a fonctionné là où d'autres avaient échoué:

table
{width : 100%; margin : auto;}

Encore merci!

Yoshaaaaaaa
Hors ligne Polo03 # Posté le 14/12/2011 à 20:26:15
Windauber tue
Avatar

Avis : Décevant

Et on est privé de Beux tableaux ici ?
"Un programme informatique fait ce que vous lui dites de faire, pas ce que vous voudriez qu'il fasse."
Image utilisateur






 
Hors ligne Brice_koc # Posté le 29/01/2012 à 11:34:19

Avis : Bon

Simple question : comment fait t ont pour introduire une image dans un tableau?
Hors ligne Brice_koc # Posté le 06/02/2012 à 18:26:04

Avis : Bon

Bonjours ,
J'ai essayez , fait des copié collé de votre tuto sa me fait pas les trais du tableau merci de m'aidez svp :)
Hors ligne Badr-B # Posté le 08/02/2012 à 22:03:15

Comment changer les couleurs des tableau :-°

Voir tous les commentaires