[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Officiels
> Site Web
> Apprenez à créer votre site web ! > XHTML & CSS, toujours plus forts ! > Les tableaux
> Lecture du tutoriel
Les tableaux
Non, nous n'en avons toujours pas terminé avec le XHTML (et avec le CSS non plus d'ailleurs !)
Certes, je tiens à vous rassurer : nous avons déjà fait le plus gros et nous avons presque terminé
Cependant, il nous reste encore quelques éléments à voir. Ce ne sont peut-être pas les plus importants, peut-être pas les plus utilisés, mais je mets ma main à couper que vous en aurez besoin tôt ou tard.
Parmi ces éléments que je veux vous faire découvrir avant que l'on se quitte (déjà ?! o_O), il y a les tableaux.
Je ne vous fais pas l'affront de vous en dessiner un, je suppose que tout le monde sait ce qu'est un tableau.
... 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 |
Bon, c'est un tableau assez primaire. Bien entendu, nous apprendrons à faire des tableaux plus complexes afin que vous puissiez réaliser tout ce dont vous avez besoin.
Encore une fois, Monsieur CSS sera de passage et vous permettra de rendre vos tableaux super classe en un clin d'oeil. Bonne nouvelle de ce côté : il n'y a pas vraiment de nouvelles propriétés CSS à apprendre, vous connaissez déjà pratiquement tout !
Un tableau se construit à l'aide de balises XHTML. Commençons par voir la structure de base...
Première balise à connaître : <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, donc il faut la mettre en dehors d'un paragraphe.
Exemple :
Code : HTML1
2
3
4
5
6
7 | <p>Ceci est un paragraphe avant le tableau.</p>
<table>
<!-- Ici, on mettra le contenu du tableau -->
</table>
<p>Ceci est un paragraphe après le tableau.</p>
|
Bon, et que met-on à l'intérieur du tableau ?
Alors 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 XHTML, 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 :
On a une balise de ligne (<tr>) qui "entoure" chacune des cellules (<td>)
Par exemple, si je veux faire un tableau à deux lignes, avec 3 cellules par lignes (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>
|
C'est un tableau ça ?
Le texte s'est écrit à la suite, et y'a même pas de bordures !
Oui, un tableau sans CSS c'est tout vide. Alors justement, rajouter des bordures c'est très simple, vous connaissez déjà le code CSS qu'il faut écrire !
Code : CSS1
2
3
4 | td /* Toutes les cellules des tableaux... */
{
border: 1px solid black; /* ... auront une bordure de 1px */
}
|
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 : CSS1
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;
}
|
Nous verrons plus loin dans ce chapitre d'autres options CSS. Nous essaierons aussi d'égayer un peu les tableaux qui sont pour le moment un peu moches, je dois le reconnaître
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 : CSS1
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;
}
|
Et voilà le travail !
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...
Nous verrons des exemples de CSS de tableaux un peu plus complets tout à l'heure.
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 perdus
Heureusement, il y a <caption> ! (ahlala, que ferait-on sans ! ^^)
Cette balise se met 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>
|
C'est quand même plus clair !
Nous avons appris à faire des petits tableaux simples. Ces petits tableaux suffisent dans la plupart des cas, mais il arrivera que vous ayez besoin de faire des tableaux plus... complexes.
Nous allons voir 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.
Commençons par le premier point : vous avez un gros tableau, et vous devez le diviser en plusieurs parties.
Diviser un gros tableau
Si votre tableau est assez gros, vous aurez tout intérêt à la découper en plusieurs parties. Pour cela, il existe des balises XHTML 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 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 :
La seule chose un peu déroutante, c'est qu'il faut mettre les balises dans l'ordre suivant :
- <thead>
- <tfoot>
- <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 faire 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>
|
3, 2, 1... Fusioooon !
Sur certains tableaux complexes, vous aurez besoin de "fusionner" des cellules entre elles.
Un exemple de fusion ? Regardez, ce tableau liste des 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'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).
Cette valeur, c'est 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 :
<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 XHTML qui me permet de réaliser la fusion de tout à l'heure :
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>
|
Je n'ai pas coloré le texte des cellules pour ne pas compliquer le code XHTML. Ceci étant, vous êtes assez grands pour le faire tous seuls maintenant : il suffit d'utiliser des class.
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.
C'est logique, non ?
Et pour le rowspan, on fait comment ?
Ca 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 mettre en haut.
C'est une autre façon de voir le tableau : au lieu de le faire en hauteur, on peut le faire en longueur.
Du coup, le colspan n'est plus adapté, c'est un rowspan qu'il faut faire pour dire que Lucky Luke est pour toute la famille.
Prenez le temps de lire et de comprendre cet exemple, ça vaut le coup d'oeil
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>
|
Ne mélangez pas tout quand même ! Si cet exemple vous embrouille, vous pouvez l'oublier pour le moment il n'est pas forcément "vital".
Vous pourrez toujours y revenir plus tard, quand vous vous serez déjà habitués avec l'autre façon de faire les tableaux. Il n'y a pas de honte à remettre un exemple pour plus tard
Bon, il n'empêche que nos tableaux ne sont pas très "design" pour le moment. Comme promis, nous allons voir dans la dernière partie de ce chapitre comment embellir un tableau à grands coups de CSS
Alors bonne nouvelle : vous connaissez déjà la plupart des propriétés CSS dont nous aurons besoin pour embellir le tableau. Quelques exemples :
- Pour modifier la bordure des cellules, il suffit d'utiliser border.
- Pour modifier la couleur de fond d'une cellule, on utilisera background-color.
- Pour modifier l'image de fond d'une cellule, on utilisera background-image
- Mais on peut aussi modifier la taille (font-size) et la police (font-family) du texte des cellules d'en-tête, en appliquant les propriétés adaptées aux balises <th>
- On peut aussi agrandir le tableau tout entier (width), le centrer (margin:auto car le tableau est un block).
- On peut centrer le texte à l'intérieur des cellules (text-align:center), modifier les marges intérieures des cellules (padding) pour aérer le tableau.
Bref, vous connaissez déjà toutes ces propriétés et je n'ai pas à vous les réapprendre, c'est une bonne chose
Le tout est de penser à les utiliser, et à les utiliser sur les bonnes balises. Par exemple, si vous mettez une couleur de fond noire à la balise <table>, tout le tableau sera noir. Tandis que si vous mettez la couleur de fond sur les balises <th>, seules les cellules d'en-tête changeront !
Rien qu'avec des propriétés CSS connues
Vous vous souvenez du tableau en 3 parties qu'on est parvenu à faire tout à l'heure ? Revoyons le code encore une fois :
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>
|
Eh bien, rien qu'en modifiant le CSS avec des propriétés qu'on connaît, il va avoir d'un coup beaucoup plus d'allure !
Code : CSS 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 | caption /* Titre du tableau */
{
margin: auto; /* Centre le titre du tableau */
font-family: Arial, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 1.2em;
color: #009900;
margin-bottom: 20px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */
}
table /* Le tableau en lui-même */
{
margin: auto; /* Centre le tableau */
border: 4px outset green; /* Bordure du tableau avec effet 3D (outset) */
border-collapse: collapse; /* Colle les bordures entre elles */
}
th /* Les cellules d'en-tête */
{
background-color: #006600;
color: white;
font-size: 1.1em;
font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}
td /* Les cellules normales */
{
border: 1px solid black;
font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center; /* Tous les textes des cellules seront centrés*/
padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}
|
C'était pas bien dur, avouez
Sur les tableaux, plus que partout ailleurs, vous aurez intérêt à travailler votre CSS. En effet, avec et sans CSS, c'est le jour et la nuit.
Il suffit de comparer. Lequel de ces 2 tableaux préférez-vous ?
Pour ma part, mon choix est fait
Et si le design de mon tableau ne vous plaît pas, n'hésitez pas à créer votre propre CSS !
Quelques nouvelles propriétés CSS
Il existe quelques nouvelles propriétés CSS qui sont propres aux tableaux.
Voici celles que je vous conseille de retenir :
- caption-side : indique où doit se trouver le titre du tableau (ne fonctionne pas sur Internet Explorer). Cette propriété peut prendre les valeurs suivantes :
- 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.
- border-collapse : on l'a déjà vue tout à l'heure, cette propriété indique que les bordures des cellules seront collées entre elles. On utilise souvent cette propriété car l'effet qu'elle procure est intéressant. Les valeurs possibles sont :
- separate : les bordures seront séparées les unes par rapport aux autres (par défaut).
- collapse : les bordures seront collées entre elles.
- vertical-align : alignement vertical du contenu d'une cellule. Si une cellule a une hauteur importante, il est possible de placer son contenu en haut, en bas ou au milieu de la cellule :
- top : le contenu sera aligné en haut de la cellule
- middle : le contenu sera aligné au milieu de la cellule
- bottom : le contenu sera aligné en bas de la cellule
Comme on connaît déjà
border-collapse, je vais me contenter de vous montrer un CSS de tableau qui utilise le
vertical-align et le
caption-side.
J'utilise les mêmes fichiers XHTML et CSS que tout à l'heure, mais je rajoute dans le CSS les deux propriétés qu'on vient d'apprendre :
Code : CSS 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 | caption
{
caption-side: bottom; /* Le titre sera placé en bas du tableau (ne marche pas sur Internet Explorer) */
margin: auto;
font-family: Arial, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 1.2em;
color: #009900;
margin-top: 20px; /* La marge doit se faire au-dessus et non en-dessous maintenant */
}
table
{
margin: auto;
border: 4px outset green;
border-collapse: collapse;
}
th
{
background-color: #006600;
color: white;
font-size: 1.1em;
font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}
td
{
height: 80px; /* J'agrandis la hauteur des cellules pour que l'on puisse voir l'alignement vertical */
vertical-align: bottom; /* Alignement vertical, le contenu des cellules sera placé en bas */
border: 1px solid black;
font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
text-align: center;
padding: 5px;
}
|
Les lignes qui ont changé sont commentées
Le titre est placé en bas du tableau grâce à
caption-side (ça ne marche malheureusement pas sous Internet Explorer).
Petit détail, j'ai modifié le
margin-bottom de tout à l'heure en
margin-top : eh oui, maintenant que le titre se trouve en bas du tableau, la marge s'effectue au-dessus du titre !
Pour pouvoir tester l'alignement vertical, j'ai dû modifier la hauteur des cellules. En effet, pour que l'alignement vertical se voie, il faut que les cellules soient suffisamment grandes.
Ensuite, le
vertical-align m'a permis de dire "Je veux que le texte soit placé en bas de chaque cellule" !
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 de surtout 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 c'est... pas très esthétique
. Profitez-en donc pour mettre à l'épreuve vos connaissances en CSS, c'est l'occasion idéale !
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
345 Zéros connectés |
8 requêtes |
0.029s (0.0143s)
