html Fusion de cellules dans un tableau

Hellooo !

J'ai créé un tableau pour lister différents objets avec différentes caractéristiques.
Il y a une centaine de lignes et 5 colonnes.

Plusieurs objets ont des caractéristiques communes et je voudrais pouvoir fusionner certains lignes dans les colonnes pour n'inscrire qu'une fois la caractéristique. Est-ce qu'il y a une solution à ce problème ou bien je dois réécrire à chaque fois la même chose sur chaque ligne ?

Merci les amis
 
  Solution
Hello, toujours plus facile quand on donne le code mon cher Victorinox ! :unsure:
Mais effectivement comme le dit Anthony avec rowspan et colspan tu peux fusionner n'importe quelles cellules de ton tableau.
HTML
// 3 colonnes fusionnées //
<table class="border">
    <tr>
        <td class="border">une colonne</td>
        <td class="border">une colonne</td>
        <td class="border">une colonne</td>
    </tr>
    <tr>
        <td colspan="3" class="border">3 colonnes fusionnées</td>
    </tr>
    <tr>
        <td class="border">une colonne</td>
        <td class="border">une colonne</td>
        <td class="border">une colonne</td>
    </tr>
</table>

// 2 Lignes fusionnées //

<table class="border">...

Anthony

Membre
Salut Victorinox, je suis pas chez moi (faut pas le dire...) donc j'ai pas mon PC sous la main mais il y a un truc à faire avec rowspan et colspan pour fusionner les colonnes ou les lignes dans un tableau.

Si pas de réponse avant demain soir je te ferais un petit topo ! A+
 

Jack

Membre
Hello, toujours plus facile quand on donne le code mon cher Victorinox ! :unsure:
Mais effectivement comme le dit Anthony avec rowspan et colspan tu peux fusionner n'importe quelles cellules de ton tableau.
HTML
// 3 colonnes fusionnées //
<table class="border">
    <tr>
        <td class="border">une colonne</td>
        <td class="border">une colonne</td>
        <td class="border">une colonne</td>
    </tr>
    <tr>
        <td colspan="3" class="border">3 colonnes fusionnées</td>
    </tr>
    <tr>
        <td class="border">une colonne</td>
        <td class="border">une colonne</td>
        <td class="border">une colonne</td>
    </tr>
</table>

// 2 Lignes fusionnées //

<table class="border">
    <tr>
        <td rowspan="2"  class="border">2 lignes fusionnées</td>
        <td class="border">une ligne</td>
    </tr>
    <tr>
        <td class="border">une ligne</td>
    </tr>
    <tr>
        <td class="border">une ligne</td>
        <td class="border">une ligne</td>
    </tr>
    <tr>
        <td class="border">une ligne</td>
        <td class="border">une ligne</td>
    </tr>
</table>
 

Wazz9

Membre
ça me semble normal, à la base, sans fusion, le tableau 2 de l'exemple a 2 colonnes et 4 lignes.
dans la première colonne on donne l'instruction de fusionner les 2 premières lignes <td rowspan="2" class="border">2 lignes fusionnées</td> donc dans la deuxième ligne <tr> il y a juste la <td> de la deuxième colonne la première <td> étant fusionnée avec la cellule du dessus.

C'est vrai que c'est pas facile à expliquer mais si c'est pas encore le cas inscris toi sur Codepen et exerce toi, c'est vraiment le plus simple.
 

Audrey

Membre
Merci pour la petite leçon je venais poser la même question !

Donc quand on fusionne 2 cellules de lignes c'est la cellule du dessous qui est fusionnée et donc on ne doit créer qu'une cellule dans la cellule du dessous ! (même en comprenant l'explication n'est pas simple !)
 

Ziggy

Membre
Ah oui c'était pour le petit plus artistique, ça reste très pratique flexbox par contre ce que je n'ai pas réussi à faire c'est le contour de la croix.
Parce qu'un bloc principal sera toujours de forme rectangulaire ou carré, franchement j'ai buté là dessus.

En même temps il y a 4 semaines je connaissais pas l'html...
 

Ces discussions pourraient vous intéresser...

Hello, je cherche à indenter la première ligne de chaque paragraphe d'un long texte. Alors je me suis lancé dans du bricolage avec des margin-left sur des span mais au niveau html c'est pas très beau. <span class="retrait_20">Il</span><span>était une fois une princesse dans...
J'ai un petit programme en Python qui permet de retourner la valeur absolue de n'importe quel nombre positif ou négatif. def absolute_value(num): if num >= 0: return num else: return -num print(absolute_value(2)) '''retourne 2'''...
  • Résolue
Salut, J'ai une erreur PHP que je n'arrive pas à résoudre, voici le code simplifié <!DOCTYPE html> <html> <head> <title>Cours PHP & MySQL</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body>...
Haut