Étape 7b : Les tableaux en plus profond et comment les manipuler

Vous avez vu, à l'étape 7, ce qu'était un tableau et ses principales composantes :

Code:

<table> /*Tableau*/
  <tbody> /*Contenu du tableau*/
    <tr> /*Rangée du tableau*/
      <td> /*Cellule dans une rangée du tableau*/
      </td>
    </tr>
  </tbody>
</table>

Si vous regardez les templates de la version phpBB2 de Forumactif, vous constaterez qu'ils sont remplis de tableaux imbriqués les uns dans les autres. C'est une mauvaise pratique puisque les tableaux devraient être utilisés uniquement pour montrer des données et non pour mettre en page votre page (si on veut un effet similaire, il est possible d'utiliser Grid-layout).

Par conséquent, cette annexe vous sera utile dans 2 situations :
- Vous voulez faire un tableau de données.
- Vous voulez jouer avec les tableaux de la version phpBB2 de forumactif.

Voici ce que cette annexe vous montrera :
- Les autres balises importantes : caption, thead, th, tbody et tfoot
- Fusionner des cellules : rowspan et colspan
- Mettre en forme un tableau
- Attributs dépréciés

Autres balises importantes

Avec vos lectures précédentes, vous savez déjà que la structure d'un tableau est la suivante :

Code:

<table> /*Tableau*/
  <tbody> /*Contenu du tableau*/
    <tr> /*Rangée du tableau*/
      <td> /*Cellule dans une rangée du tableau*/
      </td>
    </tr>
  </tbody>
</table>

Si on veut avoir un tableau qui ressemble un véritable tableau tel qu'on les voit dans les livres, vous vous retrouveriez plutôt avec quelque chose comme ceci :

Code:

<table>
  <caption>Budget pour 2020</caption>
  <thead>
    <tr>
      <th>Objets</th>
      <th>Dépenses</th>
      <th>Budget dépassé</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Beignes</th>
      <td>3,000</td>
      <td>Non</td>
    </tr>
    <tr>
      <th>Café</th>
      <td>18,000</td>
      <td>Oui</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Total</th>
      <td>21,000</td>
      <td>50%</td>
    </tr>
  </tfoot>
</table>

Qui donnerait ceci :

Budget pour 2020

Objets	Dépenses	Budget dépassé
Beignes	3,000	Non
Café	18,000	Oui
Total	21,000	50%

Pas de panique ! On va y aller étape par étape, ça ira bien ^^

---

caption

La première nouvelle balise est caption :

Code:

<caption>Budget pour 2020</caption>

Budget pour 2020

caption indique tout tout simplement le titre de votre tableau.

---

thead et th

Les deuxième et troisième nouvelles balises sont thead et th :

Code:

  <thead>
    <tr>
      <th>Objets</th>
      <th>Dépenses</th>
      <th>Budget dépassé</th>
    </tr>
  </thead>

Objets	Dépenses	Budget dépassé

thead est utilisé pour regrouper tout ce qu'il y a dans l'en-tête du tableau. Cela veut dire que si vous avez plusieurs lignes, le thead va servir à séparer la ligne qui inclut les titres des colonnes du reste des autres lignes. Si vous n'avez pas d'en-tête, vous pouvez vous en passer. En fait, beaucoup ne s'en servent pas.

th remplace td dans certaines circonstances :
Lorsque cela désigne un en-tête ou une catégorie (dans notre exemple, l'entête et les cellules de la première colonne sont tous des th.)
De plus, par défaut, les cellules qui sont en th sont en gras.

---

tbody

On le connait déjà :

Code:

  <tbody>
    <tr>
      <th>Beignes</th>
      <td>3,000</td>
      <td>Non</td>
    </tr>
    <tr>
      <th>Café</th>
      <td>18,000</td>
      <td>Oui</td>
    </tr>
  </tbody>

Beignes	3,000	Non
Café	18,000	Oui

Je sais, vous l'avez déjà vu. On vous a dit que c'était essentiel de l'inclure dans votre tableau. Pourquoi?

tbody désigne "corps" du tableau, soit le contenu du tableau autre que l'en-tête et le bas.
Pas de tbody, pas de données dans votre tableau !

---

tfoot

La dernière nouvelle balise est tfoot :

Code:

  <tfoot>
    <tr>
      <th>Total</th>
      <td>21,000</td>
      <td>50%</td>
    </tr>
  </tfoot>

Total	21,000	50%

tfoot est utilisé pour regrouper tout ce qu'il y a dans "pied", soit le bas du tableau. Cela veut dire que si vous avez plusieurs lignes, le tfoot va servir à séparer la ligne du bas (qui correspond souvent à la ligne des totaux) du reste des autres lignes. Si vous n'avez pas de ligne de bas, vous pouvez vous en passer. En fait, beaucoup ne s'en servent pas.




Et voilà ! Ce n'était pas si effrayant finalement ^^

Fusionner des cellules - rowspan et colspan

Dans le meilleur des mondes, toutes nos rangées ont le même nombre de colonnes et toutes nos colonnes ont le même nombre de rangées. Sauf que des fois... Ce serait utile de pouvoir fusionner des colonnes ou des rangées, non?

C'est actuellement possible!

Note : Dans les exemple, je n'ai pas mis les "table" et les "tbody". Vous devez les mettre, j'ai juste fait ça histoire de raccourcir un peu les exemples.

---

Le colspan

Le "colspan" sert à fusionner horizontalement des cellules.

Voici un petit exemple. Je veux obtenir ceci :

Titre
Truc1	Truc2

Bref, au total, j'ai une rangée de 1 cellule et une rangée de 2 cellule. Si j'étais sur excel, j'écrirais j'écrirais Truc1 dans une cellule, Truc2 dans la cellule de droite et je fusionnerais les 2 cellules d'en haut pour y mettre Titre.

C'est exactement ce que je vais faire ici. Le vais faire une rangée où je fusionne 2 cellule (donc je vais mettre un colspan de 2) et ensuite je vais faire une rangée avec 2 cellules :

Code:

<tr>
  <td colspan="2">Titre</td>
</tr>
<tr>
  <td>Truc1</td>
  <td>Truc2</td>
</tr>

Un autre exemple plus difficile? Je veux avoir ceci :

Titre
Truc1			Truc2
Truc3		Truc4		Truc5

Bip, erreur! On ne peut pas mettre de décimales dans un colspan.

Du coup, c'est le temps de jouer les fractions !
Dans la première rangée, on a 1 cellule qui fait toute la largeur du tableau, donc 1/1.
Dans la deuxième rangée, on a 2 cellules qui font la moitié du tableau chacune, donc 1/2.
Dans la troisième rangée, on a 3 cellules qui font le tiers du tableau chacune, donc 1/3.

Si vous avez bien appris à l'école, vous saurez qu'on ne peut pas additionner 1/1, 1/2 et 1/3 si facilement que cela. Vos professeurs vous aurons dit "on met tout sur le même dénominateur".

Ok, donc qu'est-ce qui se divise par 1, 3 et 2? La réponse est 6 !

Donc on se retrouve avec
Dans la première rangée, on a 1 cellule qui fait toute la largeur du tableau, donc 6/6.
Dans la deuxième rangée, on a 2 cellules qui font la moitié du tableau chacune, donc 3/6.
Dans la troisième rangée, on a 3 cellules qui font le tiers du tableau chacune, donc 2/6.

Cela veut dire que c'est comme si on devait mettre au total 6 cellules de large. Dans la 1ère rangée, on fusionne les 6, ce qui donne une seule cellule. Dans la 2e rangée, on en fusionne 3 de chaque côté, ce qui donne 2 cellules. Dans la 3e rangée, on en fusionne 2 à la fois, ce qui donne 3 cellules.

Donc on se retrouve avec ceci :

Code:

<tr>
  <td colspan="6">Titre</td>
</tr>
<tr>
  <td colspan="3">Truc1</td>
  <td colspan="3">Truc2</td>
</tr>
<tr>
  <td colspan="2">Truc3</td>
  <td colspan="2">Truc4</td>
  <td colspan="2">Truc5</td>
</tr>

Pas si facile finalement, non?

---

Le rowspan

Le "rowspan" sert à fusionner verticalement des cellules.

Voici un petit exemple. Je veux obtenir ceci :

Titre	Truc1
	Truc2

Bref, au total, j'ai une colone de 1 cellule et une colone de 2 cellule. Si j'étais sur excel, j'écrirais j'écrirais Truc1 dans une cellule, Truc2 dans la cellule d'en bas droite et je fusionnerais les 2 cellules d'à gauche pour y mettre Titre.


Oui. C'est exact. C'est là où le rowspan devient plus compliqué que le colspan. Puisqu'on ne peut pas fonctionner par colonne, on va devoir un peu plus se casser la tête.

Commençons! Je vais commencer par faire un tableau super normal pour visualiser :

Machin	Machin
Machin	Machin

Ce qui donne :

Code:

<tr>
  <td>Machin</td>
  <td>Machin</td>
</tr>
<tr>
  <td>Machin</td>
  <td>Machin</td>
</tr>

Mon titre commence sur la première rangée et se termine sur la deuxième rangée. Puisqu'il se commence sur la première, c'est là que je vais mettre mon titre! En plus, je sais que mon Titre a 2 cellules de hauteur et que pour fusionner verticalement, je dois utiliser un rowspan. Alors je lui mets un rowspan de 2. Donc je vais mettre ceci :

Code:

<tr>
  <td rowspan="2">Titre</td>
  <td>Machin</td>
</tr>
<tr>
  <td>Machin</td>
  <td>Machin</td>
</tr>

Bon, on a dit tout à l'heure qu'il n'y avait pas de colonne. Alors du coup... On continue sur la même rangée? Le première rangée du haut? Pourquoi pas. À droite, sur la première rangée du haut, il y a Truc1. Je le mets :

Code:

<tr>
  <td rowspan="2">Titre</td>
  <td>Truc1</td>
</tr>
<tr>
  <td>Machin</td>
  <td>Machin</td>
</tr>

J'ai terminé ma première rangée. Je passe à la deuxième. Donc première cellule à gauche... Je n'en ai pas, c'est caché par mon titre. Du coup, je ne mets pas de cellule à gauche.

C'est là qu'on se rend compte qu'il faut mettre une cellule uniquement si elle commence sur cette rangée. Le reste, on va l'ignorer.

Il ne me reste plus que le Truc2 que je mets dans la dernière cellule de ma 2e rangée :

Code:

<tr>
  <td rowspan="2">Titre</td>
  <td>Truc1</td>
</tr>
<tr>
  <td>Truc2</td>
</tr>

Ha. Ha. Ha. Vous pensez que c'est compliqué? Essayez de faire ceci :

Titre	Truc1	Truc3
		Truc4
	Truc2
		Truc5

Oui, c'est un beau casse-tête.

Du coup, je mets la suite en spoiler, ne vous sentez pas obligés de le lire, mais je vous le recommande

Spoiler:

Mettre en forme un tableau

Pour mettre en forme un tableau, nous allons utiliser un peu du CSS.

Option1	Option2
Option3	Option4

---

Les bordures

Afin de mettre des bordures, on utilise la propriété border que vous devez déjà avoir vu.

On va commencer par donner une bordure aux cellules de notre tableau :

Code:

.td {
  border: 1px solid blue;
}

Ce qui donne ceci :

Option1	Option2
Option3	Option4

---

Afin de fusionner les bordures, on utilisera la propriété border-collapse (que l'on peut traduire "coller les bordures entre elles") qui prend en compte 2 valeurs :
- collapse : les bordures seront collées entre elles, c'est ce que l'on veut
- separate : les bordures ne sont pas collées, c'est ce que l'on a actuellement (valeur par défaut)

Pour coller les bordures, on ferait cela dans notre CSS :

Code:

.table {
  border-collapse: collapse;
}
td {
  border: 1px solid blue;
}

Ce qui donne ceci :

Option1	Option2
Option3	Option4

---

Les espacements

Peut-être qu'à la place de fusionner vos bordures, vous préférez les espacer. Afin de les séparer et de déterminer un espacement, on se servira de la propriété du border-spacing. Comme son nom l'indique (border = bordures et spacing = espace), on va créer un espace entre les bordures.

Notre CSS serait cela :

Code:

table {
  border-spacing: 5px;
}
td {
  border: 1px solid blue;
}

Ce qui donne ceci :

Option1	Option2
Option3	Option4

---

Si vous souhaitez éviter que le texte à l'intérieur soit collé aux rebords de la cellule, on va créer un espacement intérieur entre les bordures et le contenu de la cellule. Pour cela, on utilisera la propriété padding que vous avez déjà vu dans le passé.

Voilà notre CSS :

Code:

td {
  padding: 5px;
  border: 1px solid blue;
}

Ce qui donne ceci :

Option1	Option2
Option3	Option4

---

Hauteur et largeur

Pour ajuster la hauteur (height) et la largeur (width) d'une cellule, c'est comme ça :

Code:

td {
  height: 50px;
  width: 150px;
  border: 1px solid blue;
}

Ce qui donne ceci :

Option1	Option2
Option3	Option4

Note : On peut aussi ajuster la hauteur et la largeur du tableau en le mettant sur le tableau directement.

---

Alignement

Facile, on va utiliser la propriété "margin" (à mettre sur le tableau) :

Code:

table {
  margin: auto;
}
td {
  border: solid 1px blue;
}

Option1	Option2
Option3	Option4

---

Il suffit d'utiliser la propriété "text-align" (à mettre sur les cellules) :

Code:

td {
  text-align: center;
  width: 150px;
  border: solid 1px blue;
}

Option1	Option2
Option3	Option4

---

Il suffit d'utiliser la propriété "vertical-align" (à mettre sur les cellules) :

Code:

td {
  vertical-align: middle;
  height: 50px;
  border: solid 1px blue;
}

Ce qui donne ceci :

Option1

Option2

---

Modifier la police, couleur, background, etc.

Je n'irai pas en profondeur ici, vous devriez avoir compris l'essentiel avec les parties précédentes, donc je fais juste une résumé de quoi sélectionner pour les mises en formes.
À noter les bordures (border), l'espacement interne (padding), la hauteur (height) et la largeur (width) peuvent êtres différentes d'un type de cellule à un autre, c'est à vous de modifier quelles cellules comme vous le voulez.

Certains exemples de propriétés à utiliser :

Code:

/*Fond*/
background: #aaaaaa;

/*Taille de la police*/
font-size: 13px;

/*Police*/
font-family: 'Times New Roman';

/*Couleur*/
color: #000000;

/*Bordure*/
border: 1 px solid blue;

/*Espacement interne*/
padding: 5px;

/*Hauteur*/
height: 150px;

/*Largeur*/
width: 200px;

/*Alignement horizontal*/
text-align: left/center/right;

/*Alignement vertical*/
vertical-align: top/middle/bottom;

Pour donner du style à toutes les cellules du tableau :

Code:

td, th {
  On met le style ici;
}

Pour donner du style aux cellules du tableau de type td uniquement :

Code:

td {
  On met le style ici;
}

Pour donner du style aux cellules du tableau de type th uniquement :

Code:

th {
  On met le style ici;
}

Pour donner du style aux cellules de l'en-tête (thead) uniquement :

Code:

thead th, thead td {
  On met le style ici;
}

Pour donner du style aux cellules du corps (tbody) uniquement :

Code:

thody th, tody td {
  On met le style ici;
}

Pour donner du style aux cellules du bas (tfoot) uniquement :

Code:

tfoot th, tfoot td {
  On met le style ici;
}

Attributs dépréciés

Il existe plusieurs attributs propres aux tableaux qui sont dépréciés, mais qu'on retrouve parfois dans les templates de ForumActif ou dans les vieux codes. Je vous les mentionne pour que vous sachiez l'équivalent en CSS si vous les croisez, mais c'est à éviter.

Voilà à quoi cela pourrait ressembler :

Code:

<table border="1" cellpadding="1" cellspacing="1">
  <tbody>
    <tr>
      <td height="150" width="90%" align="center" valign="top">Machin</td>
    </tr>
  </tbody>
</table>

Et voilà les équivalents :

cellpadding="1" => padding dans les cellules
(les chiffres 1, 2, 3, etc. correspondent à l'espacement interne en px)

cellspacing="1" => border-spacing
(les chiffres 1, 2, 3, etc. correspondent à l'espacement en px)

height="150" => height
(les chiffres 1, 2, 3, etc. correspondent à l'espacement en px)

width="90%" => width
(les chiffres 1, 2, 3, etc. correspondent à l'espacement en %)

align="center" => alignement du texte horizontal

valign="top" => alignement du texte vertical

---

Ma foi, vous avez terminé de lire cette annexe, beau travail ! Allez, c'est le temps d'aller pratiquer \o/