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
; - le corps (au centre) : il se définit avec les balises
; - le pied du tableau (en bas) : il se définit avec les balises
.
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.
C'est un peu déroutant mais il est conseillé d'écrire les balises dans l'ordre suivant :
Dans le code, on renseigne donc d'abord la partie du haut, ensuite la partie du bas, et enfin la partie principale (
Voici donc le code à écrire pour construire le tableau en trois parties :
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> <tr> <th>Nom</th> <th>Âge</th> <th>Pays</th> </tr> </thead> <tfoot> <tr> <th>Nom</th> <th>Âge</th> <th>Pays</th> </tr> </tfoot> <tbody> <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 exemple de fusion ? Regardez le tableau à la figure suivante, qui dresse une liste de films et indique à qui ils s'adressent.
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
- La fusion de colonnes : c'est ce que je viens de faire dans cet exemple. La fusion s'effectue horizontalement.
- La fusion de lignes : là, deux lignes seront groupées entre elles. La fusion s'effectuera verticalement.
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 :
1
| <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 :
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 ligne 19 ne contient que deux cellules au lieu de trois (il n'y a que deux balises
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.
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 :
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> |
Un tableau s'insère avec la balise
.En résumé
- Chaque ligne comporte des cellules
- Le titre du tableau se définit avec
- On peut ajouter une bordure aux cellules du tableau avec
border. Pour fusionner les bordures, on utilise la propriété CSSborder-collapse. - Un tableau peut être divisé en trois sections :
(en-tête),(corps) et(bas du tableau). L'utilisation de ces balises n'est pas obligatoire. - On peut fusionner des cellules horizontalement avec l'attribut
colspanou verticalement avecrowspan. Il faut indiquer combien de cellules doivent être fusionnées.
Aucun commentaire:
Enregistrer un commentaire