[HTML] Image sur plusieurs cellule de tableau

Version imprimable

16/07/2008, 16h40
lolothep

[HTML] Image sur plusieurs cellule de tableau

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
16/07/2008, 17h09
defcon_suny

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

donc laisse tomber les <tables> et travaille avec des <div>.
16/07/2008, 17h19
lolothep

Citation:

Envoyé par defcon_suny

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.
16/07/2008, 17h30
defcon_suny

Oups pardon! sans fusionner les cellules... ce n'est pas possible!
21/07/2008, 10h21
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
21/07/2008, 12h03
HiRoN

Citation:

Envoyé par 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

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

Citation:

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) ? :aie:

bonjour,

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

Code:

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 :aie:

30/07/2008, 10h45
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.
30/07/2008, 11h58
Auteur

Citation:

Envoyé par c_s_s

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 ::king:
30/07/2008, 16h32
defcon_suny

Génial mais contraignant...

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