Tableaux html avec fusion

Nous avons vu comment faire des tableaux simples sur cette page.

Maintenant attaquons nous à faire fusionner les cellules.

Kesako ça ?

Fusionner des cellules c'est permettre à certaines d'entre elles d'avoir la même largeur que plusieurs autres.

On a parfois besoin d'avoir une cellule qui prenne toute la largeur d'une ligne ou bien qu'elle occupe plusieurs cellules verticalement.

Je ne sais pas si je m'explique bien sur ce coup la !

Nous allons avoir besoin d'insérer des attributs à certaines cellules :

• L'attribut : colspan qui va nous permettre de fusionner les cellules horizontalement.
• l'attribut : rowspan qui va nous permettre de fusionner les cellules verticalement.

A ces attributs nous allons leur donner une valeur pour indiquer sur combien de cellules on veut faire fusionner notre cellule.

Parce qu'un exemple est plus parlant :

Commençons pas l'attribut colspan.

Je vous met le code et le résultat.

<table>

<caption>Menu gastro no mique</caption>

<tbody>

<tr>

<th>semaine</th>

<th>Lundi</th>

<th>Mardi</th>

<th>Mercredi</th>

<th>Jeudi</th>

<th>Vendredi</th>

<th>Samedi</th>

</tr>

<tr>

<td>1</td>

<td colspan="6">Patate</td>

</tr>

<tr>

<td>2</td>

<td>purée</td>

<td>frites</td>

<td colspan="2">pomme dauphine</td>

<td>carotte</td>

<td>salade</td>

</tr>

<tr>

<td>3</td>

<td>patate</td>

<td>frites</td>

<td>purée</td>

<td>paté</td>

<td>salade</td>

</tr>

<tr>

<td>4</td>

<td>frites</td>

<td colspan="5">régime sans sel</td>

</tr>

</tbody>

</table>

Ce qui donne :

Petit rappel : Les tableaux n'ont pas de style, j'ai volontairement décidé de rajouter des bordures, centrés mes textes et mis un fond rouge au survol pour les lignes de tableau pour une meilleure visibilité et compréhension.

Explication :

Vous vous apercevez que sur la première semaine, le menu de la semaine est composé uniquement de patate, bon d'accord je ne suis pas non plus cuisto, mais ce n'est pas ce qui nous intéresse !

Comment faire ça ?

Regardez bien le code, nous avons donc la balise <table>, puis le titre avec <caption>, puis la balise <tbody> pour l'ensemble du corps du tableau, puis j'ouvre une ligne <tr> pour mes entêtes <th.

C'est ensuite que j'arrive à la deuxième ligne de mon tableau, j'ouvre donc une nouvelle ligne avec <tr>.

Sur cette ligne, je n'ai que deux cellules <td>, la première (1) occupe la même largeur que celle du dessus (semaine).

La seconde cellule occupe la place des 6 au dessus d'elles, c'est dans cette balise que je met mon attribut "colspan" avec comme valeur "6", correspondant au nombres de cellules auquel je veux qu'elle occupe.

Sur la troisième ligne <tr>, je fais pareil, ma quatrième cellule occupe deux cellules en largeur, j'y met donc une valeur de "2" à mon attribut "colspan" dans ma balise de cellule <td>.

Et ainsi de suite pour les autres lignes.

Remarquez bien :

La valeur à ajouter à l'attribut colspan doit correspondre au nombre de cellules de la première ligne de tableau.

Sauf si vous voulez un trou entre les cellules !

Autrement dit :

Si votre première ligne, en l'occurrence ma ligne d'entêtes, comptabilise 7 cellules, alors la ligne auquel vous mettrez "colspan" devra compter un total de 7, c'est à dire une valeur correspondant au nombre de cellule que vous souhaitez + le nombre de cellule que vous mettez sur votre ligne.

Dans mon exemple j'ai deux cellules, ma première cellule + le nombre de 6 que j'ai mis à colspan, ce qui me fait bien 7, correspondant au nombre de cellules de ma ligne d'entête.

Passons à l'attribut rowspan.

Cet attribut permet d'occuper plusieurs cellules dans le sens vertical.

Je mets mon exemple et je vous explique ensuite.

<table>

<caption>Menu gastro no mique</caption>

<tbody>

<tr>

<th>semaine</th>

<th>Lundi</th>

<th>Mardi</th>

<th>Mercredi</th>

<th>Jeudi</th>

<th>Vendredi</th>

<th>Samedi</th>

</tr>

<tr>

<td>1</td>

<td rowspan="4">Patate</td>

<td>purée</td>

<td>patate</td>

<td>frites</td>

<td>carotte</td>

<td>pomme</td>

</tr>

<tr>

<td>2</td>

<td rowspan="3">frites</td>

<td>pomme</td>

<td rowspan="3">carotte</td>

<td>salade</td>

<td>carotte</td>

</tr>

<tr>

<td>3</td>

<td rowspan="2">frites</td>

<td>paté</td>

<td>salade</td>

</tr>

<tr>

<td>4</td>

<td>carotte</td>

<td>purée</td>

</tr>

</tbody>

</table>

Ce qui donne :

Explication :

La fusion des cellules en vertical est peut être un peu plus compliqué à comprendre. Pour ce faire j'ai volontairement mis un fond rouge au survol des lignes de mon tableau pour une meilleure compréhension, la logique ici consiste à bien comprendre le nombre de cellule par ligne de tableau.

Passez votre souris sur une ligne, vous verrez apparaitre le nombre de cellule qu'il faut pour chaque ligne.

Il est très important de bien comprendre ça !

Alors je commence, on est pas sortis de l'auberge !

Pour ma première ligne, rien de compliqué, c'est ma ligne d'entête.

Pour ma seconde ligne (semaine 1), j'ai décidé de mettre des patates pour tous les lundi de chaque semaine, vous remarquerez que ma ligne comporte 7 cellules, normal je n'ai pas encore fais de fusion, donc le même nombre de cellule que ma première ligne.

Sur cette ligne, j'indique à ma seconde cellule un rowspan avec une valeur de 4 correspondant à mes 4 semaines et ensuite mes autres cellules simplement.

Pour ma troisième ligne (semaine 2), c'est la que ça se complique, passez votre souris sur la ligne de la semaine 2 pour compter le nombre de cellules.

Cette ligne compte 6 cellules, eh oui normal puisque la ligne de la semaine 1 comporte une cellule avec un rowspan qui occupe 4 cellules en vertical, donc la place est prise et notre troisième ligne devra compter du coup que 6 cellules.

Je commence donc par la cellule du mardi dans cette ligne.

Les mardi des semaines 2, 3, 4 auront des frites, j'indique à la cellule un rowspan de 3 correspondant au nombres des semaines.

Sur cette même ligne, les jeudi aussi seront sur 3 semaines avec des carottes, j'indique également un rowspan de 3.

Puis évidement une cellule entre les deux, et deux autres ensuite, mais rien de compliqué avec elles.

Ok, ça commence à rentrer ?

On continue alors.

Pour ma quatrième ligne (semaine 3), passez votre souris pour compter les cellules.

Oui quatre cellules, normal puisque la ligne de la semaine 1 comporte une cellule qui en occupe 4 en vertical et la ligne de la semaine 2 comporte deux cellules qui en occupe chacune 3 cellules en vertical.

Donc trois places de prise !

Je commence par la cellule du mercredi à laquelle j'indique un rowspan de 2 correspondant à mes deux semaines (3 et 4).

Ensuite je met deux autres cellules simple qui se placeront bien évidement sur les colonnes du vendredi et du samedi puisque le jeudi est pris par la cellule de la ligne supérieur.

Pour ma cinquième ligne (semaine 4), passez votre souris sur la ligne.

Trois cellules, rien de compliqué sur cette ligne, il suffit juste de rentre trois cellules à la suite qui se placeront toutes seules comme des grandes.

Si vous n'avez toujours pas bien compris, c'est normal, ça vient peut être de mes explications !

Je vous conseille de reprendre l'article depuis le début, de relire calmement, de bien détailler les codes et pourquoi pas faire des essais en reprenant mon exemple et en le modifiant.

Combinaison de rowspan et colspan.

Alors la on tombe dans du lourd.

Meuh non, même pas peur !

Si vous avez bien compris les deux exemples du dessus, alors ça va rouler tout seul !

Nous allons donc nous occupez de fusionner des cellules en vertical et en horizontal.

Comme d'habitude, je vous met mon exemple et ensuite je vous explique :

<table>

<caption>Menu gastro no mique</caption>

<tbody>

<tr>

<th>semaine</th>

<th>Lundi</th>

<th>Mardi</th>

<th>Mercredi</th>

<th>Jeudi</th>

<th>Vendredi</th>

<th>Samedi</th>

</tr>

<tr>

<td>1</td>

<td colspan="2" rowspan="2">Patate</td>

<td>purée</td>

<td rowspan="3">frites</td>

<td colspan="2">carotte</td>

</tr>

<tr>

<td>2</td>

<td>navet</td>

<td>salade</td>

<td>purée</td>

</tr>

<tr>

<td>3</td>

<td colspan="2" rowspan="2">frites</td>

<td>salade</td>

<td colspan="2" rowspan="2">pomme</td>

</tr>

<tr>

<td>4</td>

<td>carotte</td>

<td>purée</td>

</tr>

</tbody>

</table>

Ce qui donne :

Explication :

Comme pour l'exemple précédent, vous avez la possibilité de passer votre curseur sur les différentes lignes de tableau pour vous rendre compte du nombre de cellule par ligne et du nombre de "case" qu'une cellule occupe.

Mon tableau compte en tout 7 cellules en horizontal, on est pas obligé d'avoir le même nombre pour toutes les lignes mais pour l'explication de mon exemple, ça aide !

Pour la ligne de la semaine 1 : Vous remarquerez qu'elle comporte 5 cellules en horizontal.

La première cellule est simple avec le  "1".

Sur la deuxième cellule (patate), j'indique un colspan de 2 pour occuper deux cellules en horizontal et un rowspan de 2 pour occuper deux cellules en vertical.

La troisième cellule est celle de la "purée".

Sur la quatrième cellule (frites), j'indique un rowspan de 3 pour occuper 3 cellules en vertical.

La cinquième cellule est celle de la "carotte".

Résumé de cette ligne :   5 cellules + deux fois un colspan de 2 = 7 , correspondant au nombre de cellule en horizontal de mon tableau.

Quand je dis deux fois un colspan de 2, je compte que deux et non quatre, on enlève bien évidement 1 à chaque colspan puisque l'autre 1 appartient à la cellule.

Comment ça ! c'est pas clair !

Bon c'est pas très important de comprendre mon raisonnement, je suis sur que vous comprenez bien quand même, malgré mes explications un peu tordu !

Pour la ligne de la semaine 2 : 4 cellules en horizontal.

La première cellule est celle avec le "2".

La deuxième cellule est celle avec le "navet"

La cellule entre les deux précédentes est quand à elle occupée par le rowspan de la cellule "patate" de la ligne de la semaine "1".

La troisième cellule est celle de la "salade".

La quatrième cellule est celle de la "purée".

La cellule entre le "navet" et  la "salade" est occupée par le rowspan de la cellule "frites" de la ligne "1".

Résumé de cette ligne :  Si si, j'en fais encore !

4 cellules + 3 cellules occupé par la ligne du dessus = 7.

Mouais, j'aurais pu m'en passer de celui-là.

Pour la ligne de la semaine 3 : 4 cellules en horizontal.

La première cellule est celle du "3".

Dans la deuxième cellule (frites), j'indique un colspan de 2 pour occuper deux cellules en horizontal, et un rowspan de deux pour occuper deux cellules en vertical.

La troisième cellule pour la "salade".

La quatrième cellule, j'indique un colspan de deux pour occuper deux cellules en horizontal et un rowspan de deux pour occuper deux cellules en vertical.

La cellule entre la "salade" et la "pomme" étant occupée par le rowspan de la cellule "frites" de la ligne de la semaine "1".

Résumé de cette ligne : Non, je ne vais pas vous faire ça ! Vous avez compris maintenant.

Pour la ligne de la semaine 4 : 3 cellules seulement.

Rien de spécial ici, j'insère simplement trois cellules, les quatre autres étant occupée par les deux cellules de la "frites" de la semaine "3" et la "pomme" de la semaine "3".

C'est fini pour cette partie de fusion de cellules. n'hésitez pas à me laisser un commentaire si vous ne comprenez pas ou bien si j'oublie quelque chose ou simplement pour me dire si vous avez appréciez mes explications.