Rechercher : dans
Par :

Inserer une image dans un tableau html

Dernière réponse le 16 jan 2009 à 20:45:29 yoann72100, le 18 aoû 2008 à 23:48:50 
 Signaler ce message aux modérateurs

Bonjour, comment on fait pour installer une image dans un tableau en html

Configuration: Windows Vista
Firefox 3.0.1

Meilleures réponses pour « Inserer une image dans un tableau html » dans :
[Outlook Express] Créer papier à lettre / Insérer image de fond VoirLe papier à lettre est une fonctionnalité de Outlook Express permettant d'égayer les courriers électroniques envoyés en insérant des illustrations (images, texte, etc.) en image de fond. Créer son papier à lettre sous Outlook Express Dans la fenêtre...
Insérer un gif animé dans Excel VoirPour insérer une image gif animée dans un classeur Excel, le réflexe est de faire le menu insertion / image, mais cela ne fonctionne pas. C'est normal car l'animation est faite par plusieurs images et l'importation se limite à la première. Pour que...
Insérer une image dans un mail Gmail en cours de composition VoirVoici une excellente méthode pour insérer des images dans vos e-mails Gmail. Résultat garanti ! Vu que vous avez un compte Gmail (puisque vous vous posez cette question) vous avez nécessairement accès à Google Documents. C'est le même compte...
Gestion des images en HTML VoirComment afficher des images sur une page web? Quelques images sur un site Web peuvent le rendre plus attractif et plus convivial, cependant il est important de ne pas sombrer dans l'excès car les images peuvent impliquer un temps de chargement...
LaTeX - Insertion d'images VoirStyle LaTeX permet d'insérer des images de différents formats. Le plus simple est d'insérer des fichiers de type eps (Encapsuled Postscript) : Il suffit d'insérer dans le préambule la ligne suivante : \usepackage{graphicx} Puis d'insérer...

1

gaerebut, le 18 aoû 2008 à 23:51:41
  • +4

Salut, heu ben c'est simple, c'est comme pour mettre une image normal ...
exemple:

<table>
<tr>
<td><img src="image1.jpg" alt="titre" /></td>
<td><img src="image2.jpg" alt="titre" /></td>
</tr>
</table>

A+

Gaerebut Il y a 2 règles d'or pour réussir dans la vie :
-Règle 1:  ne jamais dire tout ce que l'on sait...
-Règle 2: ...

Répondre à gaerebut

2

yoann72100, le 19 aoû 2008 à 02:48:20
  • +1

Mercie serais tu comment faire pour pouvoir y écrire par dessus ^^ stp sérieuux merci tu ma beaucoup aider

Répondre à yoann72100

3

gaerebut, le 19 aoû 2008 à 09:23:09
  • +2

Alors heu là c'est plus dur par contre !
Tu veux mettre un image et écrire par dessus ? Ou a côté mais dans la même cellule du tableau ?

Si c'est le premier cas, tu créé un div et tu lui donne un id comme ceci

<div id="texte"></div>


Ensuite tu mets du texte entre les 2 balises !

<div id="texte">CECI EST UN TEXTE</div>


Puis, pour qu'il vienne chevaucher l'image, a mon avis, il faut utiliser l'attribue absolute en css puis via les 2 autre attribus left et top tu règle le texte sur l'image !

<div id="texte" style="position: absolute; top:Xpx; left: Ypx">CECI EST UN TEXTE</div>


Xpx et Ypx sont les distance en pixel ou le texte aparraîtra sur ton écran !
Essaye de rien mettre (donc juste ça
<div id="texte" style="position: absolute">CECI EST UN TEXTE</div>
), si ça ne marche pas, essaye comme ceci
<div id="texte" style="position: absolute; top: auto; left: auto">CECI EST UN TEXTE</div>
et si ça ne marche toujours pas, remplace le X et le Y par des valeurs comme dans l'exemple suivant :

<div id="texte" style="position: absolute; top:50px; left: 200px">CECI EST UN TEXTE</div>


N'oublie pas que Top place le texte Verticalement et Left, Horizontalement !
L'atribue position: absolute va permettre de dire que l'élément touché (donc ici le div) sera indépendant de tout le reste et pourra donc chevaucher !

Par contre après, il y aura peut-être un problème de z-index !
Donne moi des nouvelles si c'est le cas (en gros, si le texte est caché derrière une image ou autre chose et on ne le voit pas !)

A+

Gaerebut Il y a 2 règles d'or pour réussir dans la vie :
-Règle 1:  ne jamais dire tout ce que l'on sait...
-Règle 2: ...

Répondre à gaerebut

4

Joy_^, le 19 aoû 2008 à 09:53:31
  • +1

Oula y en a qu'aime se compliquer la vie apparemment ^^

Parce que en fait c'est tout simple, suffit de mettre une image de fond à ton <td>, c'est tout.

Donc tu fais ça :

<table>

<tr>
<td style="width:100px; height:40px; background-image: url(image1.jpg);">ton texte</td>
<td style="width:100px; height:40px; background-image: url(image2.jpg);">ton texte</td>
</tr>

</table>

Bien sur dans width et height il faut mettre la taille de ton image de fond (largeur et hauteur en pixels)

Voilà :)

ps : le coup du position absolute marche aussi évidemment, par contre il faut que son parent soit en position relative, sinon il va se placer par rapport au body. Et sinon pourquoi tu lui mets un id si tu utilise le style css dans la balise ???

Répondre à Joy_^

5

gaerebut, le 19 aoû 2008 à 10:25:33
  • +1

Ben oui j'y avait pas pensé ^^ lol

Bien évidemment ça marche aussi bien ton code MAIS c'est plus limité dans le principe ou si il veut placer plusieurs images c'est plus dur (même principe mais avec des div au lieu des td)

Puis l'id pour le div ... je sais pas XD l'habitude lol
C'est inutile ...

Donc revoici mon code corigé :

<table>
<tr>
<td style="position: relative"><img src="image1.jpg" alt="titre" /><div id="texte" style="position: absolute;>TEXTE SUR IMAGE 1</div></td>
<td style="position: relative"><img src="image2.jpg" alt="titre" /><div id="texte" style="position: absolute;>TEXTE SUR IMAGE 2</div></td>
</tr>
</table> 


A+

Gaerebut Il y a 2 règles d'or pour réussir dans la vie :
-Règle 1:  ne jamais dire tout ce que l'on sait...
-Règle 2: ...

Répondre à gaerebut

6

Joy_^, le 19 aoû 2008 à 11:07:23

Oui effectivement si les images n'ont pas les mêmes tailles, ça ne marchera pas il faudra ajouter un no-repeat et positionner le background.

En gros ça donnerait ça :

<table>

<tr>
<td style="width:100px; height:40px; background: url(image1.jpg) no-repeat top left;">ton texte</td>
<td style="width:90px; height:150px; background-image: url(image2.jpg) no-repeat top left;">ton texte</td>
</tr>

</table>

donc là les images vont se mettre en haut à gauche de la cellule, pour les changer de place suffit de changer top par bottom ou center, et left par right ou center.

Bon de toute façon y a toujours plusieurs solutions, donc à lui de voir selon ce qu'il veut faire exactement.

Voilà :)

Répondre à Joy_^

7

 yoann72100, le 19 aoû 2008 à 16:41:34

Mercie mille fois je men sort deja imptipeu mieu ^^

Répondre à yoann72100