Fusion de cellule

[L'ange noir]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Moi uniquement
Problème apparu depuis : 06/12/2021
Lien du forum : https://vampires-kingdom.forumactif.com/

Description du problème

Bonjour à tous,

Je cherche à fusionner les cellules de mon tableau. Je réussis à le faire sur les lignes avec rowspan, mais uniquement si elles sont au bord du tableau. Si je veux fusionner des cellules en fin de tableau ou à l'intérieur, je n'y arrive pas.

Voici le code où je cherche à fusionner la cel 3 avec la cel 5 :

Code:

<<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33% rowspan=2>cellule 1</TD>
<TD width=33%>cel 2</TD>
</TR>
<TR>
<TD width=33%>cel 3</TD>
</TR>
<TR>
<TD width=33%>cel 4</TD>
<TD width=33%>cel 5</TD>
</TR>
</TABLE></CENTER>

J'ai lu plein de site qui explique les tableaux et malgré tout, je ne trouve pas comment faire. Si quelqu'un peut m'aider, merci d'avance.

[Oka.mi]

Bonjour,

Pour ce que vous souhaitez faire, je vous conseille de vous tourner vers le grid, qui est du css : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
Je vous ai fait une démo sur base de votre code et en fusionnant la cellule 3 et 5 comme vous le vouliez :

Code:

<div style="display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 5px; grid-auto-rows: minmax(22px, auto);">
<div style="background: #ddd; grid-column:1; grid-row:1/ span 2;">cellule 1</div>
<div style="background: #ddd; grid-column:2; grid-row:1;">cel 2</div>
<div style="background: #ddd; grid-column:2; grid-row:2/ span 2;">cel 3 & cel 5</div>
<div style="background: #ddd; grid-column:1; grid-row:3;">cel 4</div>
</div>

Je vous ai détaillé chaque div pour que vous compreniez plus facilement comment chaque cellule est paramétrée, je vous présente plus bas une autre manière d'écrire ce code, plus organisée (en séparant html et css).

En attendant je vous fais une explication rapide de ce qui est défini ici :
On a d'abord un div qui englobe tout et qui a un display: grid avec lequel on annonce l'affichage en grille css. Ce div, vous pouvez lui donner un width. Par défaut, il fera la largeur de son élément parent (la largeur prévue dans votre message par exemple) et la taille des cellules s'adapteront en fonction.
grid-template-columns on détermine le nombre de colonnes qu'il y aura et leurs tailles (vous pouvez faire la même chose pour les lignes avec grid-template-rows, mais il y a une autre manière de déterminer les lignes que nous verrons plus bas).
Pour comprendre ce que représente le fr et comment paramétrer la taille de vos colonnes / lignes : https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#lunit%C3%A9_fr
grid-gap on détermine l'espace entre chaque cellule. Vous pouvez choisir une séparation différente entre les colonnes et les lignes avec grid-column-gap et grid-row-gap.
grid-auto-rows on détermine la taille d'une ligne, ici nous avons mis comme taille minimum 22px avec une taille maximum automatique (s'adaptant en fonction du contenu).

Ensuite, il nous reste à déterminer l'emplacement de la cellule via grid-column et grid-row. Pour cela il suffit simplement de vous dire que chaque cellule porte un numéro et il vous faut juste déterminer le(s)quel(s) la vôtre doit occuper.
Si on prend l'exemple de votre cellule 1 par exemple, on sait qu'elle occupe la colonne 1 et juste la colonne 1, et au niveau des lignes elle occupe la ligne 1 et 2, on dit donc grid-row: 1 pour sa cellule de départ et span 2 pour sa taille à la manière d'un colspan ou d'un rowspan.

Si on sépare le css et le html pour faire plus propre, ça donnerait :

Code:

<div class="grille">
<div id="cell1">cellule 1</div>
<div id="cell2">cel 2</div>
<div id="cell3">cel 3 & cel 5</div>
<div id="cell4">cel 4</div>
</div>

et dans la feuille css, il faudrait ajouter ceci :

Code:

.grille {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 5px;
   grid-auto-rows: minmax(22px, auto);
}

.grille div {
   background: #ddd;
}

#cell1 {
   grid-column: 1;
   grid-row: 1/ span 2;
}

#cell2 {
   grid-column: 2;
   grid-row: 1;
}

#cell3 {
   grid-column: 2;
   grid-row: 2/ span 2;
}

#cell4 {
   grid-column: 1;
   grid-row: 3;
}

[L'ange noir]

Bonsoir

Merci pour votre réponse. Je ne connaissais pas du tout le code avec grid. Je n'ai qu'une base en html et css. Je n'ai pas tout compris à votre explication. Cela va me demander de regarder vraiment à fond et de bien comprendre pour être capable de reproduire ce que vous m'avez démontré. Je finirai par comprendre à force d'essai et de relecture.

Merci encore

[Oka.mi]

Par contre, est ce que ce code peut fonctionner sans CSS parce que j'écris directement sur une page (post) du forum et je n'ai pas de page css.

Vous pouvez soit mettre le code dans la feuille de style css de votre forum : Affichage > Images et Couleurs > Couleurs > Feuille de style css pour qu'elle puisse être réutilisée partout (vous n'aurez que l'html à placer), soit l'intégrer à exclusivement à votre post avec les balises style placées en début de message, ce qui donnerait ceci :

Code:

<style>.grille{display: grid; grid-template-columns: repeat(2,1fr); grid-gap: 5px; grid-auto-rows: minmax(22px, auto);}.grille div{background:#ddd}#cell1{grid-column:1; grid-row:1/ span 2;}#cell2{grid-column:2; grid-row:1;}#cell3{grid-column:2; grid-row:2/ span 2;}#cell4{grid-column:1; grid-row:3;}</style>
<div class="grille">
<div id="cell1">cellule 1</div>
<div id="cell2">cel 2</div>
<div id="cell3">cel 3 & cel 5</div>
<div id="cell4">cel 4</div>
</div>

N'hésitez pas si vous avez des questions

[L'ange noir]

D'accord, merci bien.
Je viens juste de vous envoyer un MP.

"Vous pouvez soit mettre le code dans la feuille de style css de votre forum : Affichage > Images et Couleurs > Couleurs > Feuille de style css pour qu'elle puisse être réutilisée partout"

Vous voulez dire qu'en procédant comme ça, sur tous les posts que les membres ou moi-même publierons, nous pourront utiliser ce code si jamais on décide de faire un tableau par ce moyen ? Partout, sur tout le forum ?

[Oka.mi]

Vous voulez dire qu'en procédant comme ça, sur tous les posts que les membres ou moi-même publierons, nous pourront utiliser ce code si jamais on décide de faire un tableau par ce moyen ? Partout, sur tout le forum ?

C'est exact !

D'ailleurs dans le css, j'ai mis un class pour "grille" et des id pour le reste de manière un peu arbitraire (en me disant que vous réutiliserez plus souvent la base du "grille" que les cellules), mais vous pouvez bien changer cela en fonction de vos besoins. Pour info, contrairement à un class, un id ne peut être présent qu'une fois par page.

[L'ange noir]

D'accord pour le ID une fois par page. Je ferai attention à cela. Sinon, c'est juste merveilleux de pouvoir passer par le panneau d'admin et ainsi l'avoir partout.

J'écris un journal trimestriel sur le forum, alors je crois bien que ce système de grid va bien me servir. En ce moment je jongle entre code par block en div et code en table. Pas toujours évident et assez long à faire. Je pense que si j'arrive bien à maîtriser le système que vous me conseillez, ce sera plus facile et surtout réutilisable en aménageant la grille selon mes besoins.