Discussion :

[lolothep]

Bonjour


Comment faire pour qu'une meme image occupe plusieurs cellules d'un tableau ?

Imaginons un tableau composé de 9 cellules (représenté en "O")

OOO
OOO
OOO

Je désire qu'une image (représentée en "X") s'étale sur les 2 première cellules. Sans bien sur fusionner ces 2 cellules pour n'en former plus qu'une.

XXO
OOO
OOO


C'est possible ?
Si oui, comment faire ?


Merci

[defcon_suny]

La règle à respecter en HTML est la sémantique des balises!

donc laisse tomber les <tables> et travaille avec des <div>.

[lolothep]

La règle à respecter en HTML est la sémantique des balises!

donc laisse tomber les <tables> et travaille avec des <div>.

Merci pour ce conseil, mais il ne répond pas du tout à ma question.

[defcon_suny]

Oups pardon! sans fusionner les cellules... ce n'est pas possible!

[ChTiRiBi]

c'est possible en coupant l'image en 2, un simple éditeur d'images comme paint peut le faire mais fait attention à la taille des 2 sous images que tu va faire

[HiRoN]

c'est possible en coupant l'image en 2, un simple éditeur d'images comme paint peut le faire mais fait attention à la taille des 2 sous images que tu va faire

Donc 2 images pour 2 td...
Donc pas possible au vu de la demande initiale...

Comment faire pour qu'une meme image occupe plusieurs cellules d'un tableau ?

Sous entendu une seule image (non-découpé car sinon c'est pas une seule) ?

[Auteur]

bonjour,

une autre solution (que je n'aime pas trop ceci dit) inclure un tableau dans ton tableau :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<table border="1" style="width: 400px">
  <tr>
    <td colspan="2" style="border:none;">
      <table style="width:100%; background-image:url('images/fond.jpg');margin:0px" border="1">
        <tr>
          <td>cellule 1
          </td>
          <td>cellule 2
          </td>
        </tr>
      </table>
    </td> 
    <td>&nbsp;
    </td>  
  </tr>
  <tr>
    <td>&nbsp;
    </td>
    <td>&nbsp;
    </td>
    <td>&nbsp;
    </td>  
  </tr>
  <tr>
    <td>&nbsp;
    </td>
    <td>&nbsp;
    </td>
    <td>&nbsp;
    </td>  
  </tr>
 </table>

le premier td a un colspan="2" et contient un tableau avec 2 cellules.
Comme tu pourras le constater il y a un petit souci avec les bordures.



Tiens, quelqu'un a le même avatar que moi

[c_s_s]

Bonjour,

Je ne sais pas exactement quelles sont les propriétés de ta table et de tes cellules (largeur fixe ? bordure ? padding ?), mais je pense qu'il y a moyen d'obtenir le résultat que tu souhaites.

En fait, il suffit de mettre l'image en fond dans chacune des deux cellules.
Dans la première cellule, l'image sera calée à gauche, et dans la deuxième cellule, l'image sera calée à droite.
De cette façon, chaque cellule affiche la partie de l'image qui est cachée dans l'autre cellule.

Voici un exemple, c'est peut-être plus parlant : http://www.ellm.net/labo/cellules.html

Evidemment, il faut que : (largeur cellule 1) + (largeur cellule 2) = largeur de l'image.

[Auteur]

En fait, il suffit de mettre l'image en fond dans chacune des deux cellules.
Dans la première cellule, l'image sera calée à gauche, et dans la deuxième cellule, l'image sera calée à droite.
De cette façon, chaque cellule affiche la partie de l'image qui est cachée dans l'autre cellule.

Voici un exemple, c'est peut-être plus parlant : http://www.ellm.net/labo/cellules.html

Evidemment, il faut que : (largeur cellule 1) + (largeur cellule 2) = largeur de l'image.

Je viens de voir le code source de ta page : pas bête comme truc :

[defcon_suny]

Génial mais contraignant...

Je tournerai encore 7 fois ma langue avant de dire encore qu'un truc n'est pas possible