La première balise à connaître est
Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe. Exemple :
1
2
3
4
5
6
7
| <p>Ceci est un paragraphe avant le tableau.</p><table> </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 :
Pour commencer en douceur, voici deux nouvelles balises très importantes :
En HTML, un tableau se construit ligne par ligne. Dans chaque ligne (
Schématiquement, un tableau se construit comme à la figure suivante.
), on indique le contenu des différentes cellules (Schématiquement, un tableau se construit comme à la figure suivante.
On a une balise de ligne (
Par exemple, si je veux faire un tableau à deux lignes, avec trois cellules par ligne (donc trois colonnes), je devrai taper ceci :
) qui englobe un groupe de cellules (Par exemple, si je veux faire un tableau à deux lignes, avec trois cellules par ligne (donc trois colonnes), je devrai taper ceci :
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>États-Unis</td> </tr></table> |
Le résultat est un peu déprimant (figure suivante).
C'est un tableau ça ?
Le texte s'est écrit à la suite et il n'y a même pas de bordures !
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 !
1
2
3
4
| td /* Toutes les cellules des tableaux... */{ border: 1px solid black; /* auront une bordure de 1px */} |
Et voici le résultat à la figure suivante.
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,
Cette propriété peut prendre deux valeurs :
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)
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;} |
La figure suivante représente le résultat obtenu.
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
La ligne d'en-tête se crée avec un
comme on l'a fait jusqu'ici, mais les cellules qu'elle contient sont, cette fois, encadrées par des balises
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <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
- 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).
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;} |
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.
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
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) :
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) :
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>Â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> |
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.
Aucun commentaire:
Enregistrer un commentaire