Inserer une image dans un tableau html [Résolu/Fermé]

Signaler
-
Messages postés
278
Date d'inscription
vendredi 8 février 2008
Statut
Membre
Dernière intervention
18 juin 2016
-
Bonjour, comment on fait pour installer une image dans un tableau en html
A voir également:

7 réponses

Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
169
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
5
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 63550 internautes nous ont dit merci ce mois-ci

Messages postés
278
Date d'inscription
vendredi 8 février 2008
Statut
Membre
Dernière intervention
18 juin 2016
166
attention <div> n'est pas <table> :p

de plus la personne a demander pour le tableau pas pour une cellule :p

>donc par exemple

<table background="adresse de l'image" cellspacing="1" width="450" align="center">
<tr><td colspan="2"></td></tr>
<tr></td></tr>
</table>



la seul chose que je me souvient plus c'est pour faire en sorte que l'image face pile la taille du tableau ou de la cellule (si elle est trop grande)
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
169
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
Messages postés
1017
Date d'inscription
mardi 30 octobre 2007
Statut
Membre
Dernière intervention
22 novembre 2013
169
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

j'ai un triple album de platine

Mercie mille fois je men sort deja imptipeu mieu ^^

Mercie serais tu comment faire pour pouvoir y écrire par dessus ^^ stp sérieuux merci tu ma beaucoup aider
Messages postés
54
Date d'inscription
mercredi 26 décembre 2007
Statut
Membre
Dernière intervention
12 septembre 2008
112
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 ???
Messages postés
54
Date d'inscription
mercredi 26 décembre 2007
Statut
Membre
Dernière intervention
12 septembre 2008
112
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à :)