Flux rss
Collection CommentCaMarche.net
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

Inserer une image dans un tableau html

yoann72100, le lundi 18 août 2008 à 23:48:50
Bonjour, comment on fait pour installer une image dans un tableau en html
Configuration: Windows Vista
Firefox 3.0.1
Répondre à yoann72100  Signaler ce message aux modérateurs Aller au dernier message

1


  • 2
    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
gaerebut, le lundi 18 août 2008 à 23:51:41
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


  • 1
    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
yoann72100, le mardi 19 août 2008 à 02:48:20
Mercie serais tu comment faire pour pouvoir y écrire par dessus ^^ stp sérieuux merci tu ma beaucoup aider
Répondre à yoann72100

3


  • 1
    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
gaerebut, le mardi 19 août 2008 à 09:23:09
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


  • 1
    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
Joy_^, le mardi 19 août 2008 à 09:53:31
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


  • 1
    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
gaerebut, le mardi 19 août 2008 à 10:25:33
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


  • 1
    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
Joy_^, le mardi 19 août 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


  • 1
    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
 yoann72100, le mardi 19 août 2008 à 16:41:34
Mercie mille fois je men sort deja imptipeu mieu ^^
Répondre à yoann72100
Insérer un code html dans un post phpbb (Résolu) Bonjour à tous, J'aimerais savoir si il était possible d'insérer du code html (en l'occurence un tableau) dans un post phpbb ! Si oui, comment faire ?? Merci www.commentcamarche.net/forum/affich-2389720-inserer-un-code-html-dans-un-post-phpbb
[PHP] -débutant- taille de tableau HTML (Résolu) Bonjour, Voici ma question de grand débutant : Je cherche à créer un tableau HTML, dont je puisse entrer les dimensions (nombre de colonnes = nombre de lignes) dans un formulaire (utilisant PHP). j'ai pour le moment créer deux expression for... www.commentcamarche.net/forum/affich-2784194-php-debutant-taille-de-tableau-html
Insérer un gif animé dans ExcelPour 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... www.commentcamarche.net/faq/sujet-8019-inserer-un-gif-anime-dans-excel
[FreeMind] Publier une mindmap dans une page webFreeMind est un logiciel de mindmapping. Vous avez plusieurs possibilités pour publier votre mindmap dans une page web. Flash applet Java Simple image PNG HTML+Javascript (texte seulement) HTML+Javascript (texte+icônes) HTML+Javascript... www.commentcamarche.net/faq/sujet-4857-freemind-publier-une-mindmap-dans-une-page-web
[Outlook Express] Créer papier à lettre / Insérer image de fondLe 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... www.commentcamarche.net/faq/sujet-2702-outlook-express-creer-papier-a-lettre-inserer-image-de-fond
COMMENT INSERER UN CODE HTML SUR PAGE WEB (Résolu)Bonjour, je suis en train de creer un site web avec le logiciel dreamweaver8 et j'aimerais dans une des page du site inserer un code html (google maps en l'occurence)comment dois-je faire merci www.commentcamarche.net/forum/affich-4240209-comment-inserer-un-code-html-sur-page-web
Decalage de tableaux HTML (Résolu)Bonjour à tous, Je voudrais éditer plusieurs tableaux HTML, les uns en dessous des autres, mais à chaque fois avec un petit décalage (la valeur d'une tabulation) Comment puis je faire Merci de votre réponse et bonne journée www.commentcamarche.net/forum/affich-2832856-decalage-de-tableaux-html
Cadre autour d'une page inserer dans tableau (Résolu)Bonjour, j'ai un petit souci, j'ai voulu inserer une pages html dans un tableau, jusque la pas de probleme, mon souci c'est que je me retrouve avec une sorte de cadre autour de cette page, ce qui n'est pas du plus bel effet je doit... www.commentcamarche.net/forum/affich-5023163-cadre-autour-d-une-page-inserer-dans-tableau
Gestion des images en HTMLComment 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... www.commentcamarche.net/contents/html/htmlimages.php3
LaTeX - Insertion d'imagesStyle 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... www.commentcamarche.net/contents/latex/latex-images.php3