Problème image dans un tableau

Fermé
gabs01 - 14 mai 2012 à 14:09
 nico874 - 19 févr. 2014 à 14:53
Bonjour,


j'ai un problème d'alignement d'image dans un tableau. Je vous mets un morceau du code parce que l'intégrale est bien trop long.

Je fais une succession de tableau et dans les cellules j'intègre les images. A part les 2 premières qui sont décalés par rapport à l'ensemble le reste fonctionne bien. je ne comprends pas pourquoi le code est identique.

<table width="100%" border="0" cellspacing="30" cellpadding="5">
<tbody>
<tr>
<td colspan="2" align="center" valign="top" width="50%"><a href="http://18eavenue.files.wordpress.com/2012/04/img_0168.jpg">
<img class="alignnone size-thumbnail wp-image-59" title="IMG_0168" src="http://18eavenue.files.wordpress.com/2012/04/img_0168.jpg?w=150" alt="" width="150" height="112" /></a></td>

<td colspan="2" align="center" valign="top" width="50%"><a href="http://18eavenue.files.wordpress.com/2012/04/img_0169.jpg"><img class="size-thumbnail wp-image-60 aligncenter" title="IMG_0169" src="http://18eavenue.files.wordpress.com/2012/04/img_0169.jpg?w=150" alt="" width="150" height="112" /></a></td>

</tr>
</tbody>
</table>

<table width="100%" border="0" cellspacing="15" cellpadding="4">
<tbody>
<tr>
<td colspan="2" align="center" valign="top" width="50%"><img class="alignnone size-thumbnail wp-image-58" title="IMG_0166" src="http://18eavenue.files.wordpress.com/2012/04/img_01661.jpg?w=150" alt="" width="150" height="112" /></td>
<td colspan="2" align="center" valign="top" width="50%"><a href="http://18eavenue.files.wordpress.com/2012/04/img_0172.jpg"><img class="size-thumbnail wp-image-62 aligncenter" title="IMG_0172" src="http://18eavenue.files.wordpress.com/2012/04/img_0172.jpg?w=150" alt="" width="150" height="112" /></a></td>
</tr>
</tbody>
</table>

<table width="100%" border="0" cellspacing="15" cellpadding="4">
<tbody>
<tr>
<td colspan="2" align="center" valign="top" width="50%"><a href="http://18eavenue.files.wordpress.com/2012/04/img_0173.jpg"><img class="alignnone size-thumbnail wp-image-63" title="IMG_0173" src="http://18eavenue.files.wordpress.com/2012/04/img_0173.jpg?w=150" alt="" width="150" height="112" /></a></td>
<td colspan="2" align="center" valign="top" width="50%"><a href="http://18eavenue.files.wordpress.com/2012/04/img_01741.jpg"><img class="alignnone size-thumbnail wp-image-65" title="IMG_0174" src="http://18eavenue.files.wordpress.com/2012/04/img_01741.jpg?w=150" alt="" width="150" height="112" /></a></td>
</tr>
</tbody>
</table>

<table width="100%" border="0" cellspacing="15" cellpadding="4">
<tbody>
<tr>
<td colspan="2" align="center" valign="top" width="50%"><a href="http://18eavenue.files.wordpress.com/2012/04/img_0176.jpg"><img class="alignnone size-thumbnail wp-image-66" title="IMG_0176" src="http://18eavenue.files.wordpress.com/2012/04/img_0176.jpg?w=150" alt="" width="150" height="112" /></a></td>
<td colspan="2" align="center" valign="top" width="50%"><a href="http://18eavenue.files.wordpress.com/2012/04/img_0223.jpg"><img class="alignnone size-thumbnail wp-image-67" title="IMG_0223" src="http://18eavenue.files.wordpress.com/2012/04/img_0223.jpg?w=150" alt="" width="150" height="112" /></a></td>
</tr>
</tbody>
</table>

<table width="100%" border="0" cellspacing="15" cellpadding="4">
<tbody>
<tr>
<td colspan="2" align="center" valign="top" width="50%"><a href="http://18eavenue.files.wordpress.com/2012/04/img_0224.jpg"><img class="alignnone size-thumbnail wp-image-68" title="IMG_0224" src="http://18eavenue.files.wordpress.com/2012/04/img_0224.jpg?w=150" alt="" width="150" height="112" /></a></td>
<td colspan="2" align="center" valign="top" width="50%"><a href="http://18eavenue.files.wordpress.com/2012/04/img_0178.jpg"><img class="alignnone size-thumbnail wp-image-69" title="IMG_0178" src="http://18eavenue.files.wordpress.com/2012/04/img_0178.jpg?w=150" alt="" width="150" height="112" /></a></td>
</tr>
</tbody>
</table>

Voilà si vous pouviez m'aider ce serait super je suis coincé. Merci d'avance.
A voir également:

3 réponses

TechPoint Messages postés 15 Date d'inscription vendredi 11 mai 2012 Statut Membre Dernière intervention 14 mai 2012 2
14 mai 2012 à 14:22
Salut, :)

Je viens d'aller voir sur ton site, c'est beaucoup plus simple de s'y repérer, et ce que je ne comprends pas, c'est pourquoi tu n'as tout simplement pas rentré les mêmes valeurs des autres tableaux dans ton premier tableau.
En effet, celui-ci est différent et je ne vois pas pourquoi tu as fait ça.
0
Bonjour merci de s'intéresser à mon problème. J'ai mal posté les valeurs de tableau mais même avec les valeurs de cellspacing="15" cellpadding="4" partout çà ne fonctionne pas quand même. Les tableaux n'ont pas la même taille pourtant j'ai mis les mêmes valeurs partout.
0
txiki Messages postés 6597 Date d'inscription mercredi 30 janvier 2002 Statut Contributeur Dernière intervention 22 février 2024 515
14 mai 2012 à 15:27
1- Mais pourquoi diable fusionner 2 cellules pour y mettre une image ?
2- Ensuite, le premier tableau a un cellspacing de 30 et non de 15 pour les autres.
3- Et pourquoi faire plusieurs tableaux au lieu d'un seul avec autant de <tr> (lignes) que nécessaire ?
4- tes Valign=top ne servent à rien puisque le contenu s'adaptera au contenant (à condition de ne pas mettre de heigth="une valeur"). le cellpadding fera ton espace interne dans la cellule.

Le bonheur est la seule chose que l'on peut donner sans l'avoir.
0
mpmp93 Messages postés 6652 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
Modifié par mpmp93 le 14/05/2012 à 15:44
Bonjour,

Déja dans les cellules ya pas besoin du cellpadding=2

Code corrigé:

<style type="text/css"> 
   table { width: 100%; font: inherit; } 
   table tbody tr td { text-align: center; vertical-align: middle; width: 50%; } 
   table tbody tr td img { width: 150px; height: 112px; } 
</style> 

<table> 
  <tbody> 
    <tr> 
      <td> 
        <a href="https://18eavenue.files.wordpress.com/2012/04/img_0168.jpg"> 
        <img class="alignnone size-thumbnail wp-image-59" title="IMG_0168" src="https://18eavenue.files.wordpress.com/2012/04/img_0168.jpg?w=150" alt="" /></a> 
      </td> 
      <td> 
        <a href="https://18eavenue.files.wordpress.com/2012/04/img_0169.jpg"><img class="size-thumbnail wp-image-60 aligncenter" title="IMG_0169" src="https://18eavenue.files.wordpress.com/2012/04/img_0169.jpg?w=150" alt=""/></a> 
       </td> 
     </tr> 

     <tr> 
        ....mettre ici le contenu des <tr></tr> des autres tables 
     </tr> 
  </tbody>
</table>  


et je pense que coté classes css affectées aux images, ya de quoi améliorer

A+

un +1 sur mes commentaires - si vous avez apprécié - c'est gentil, merci.
0
Merci beaucoup c'est beaucoup mieux. Merci de m'avoir consacrer de votre temps c'est très aimable de votre part..
0
Le problème c'est que cà fonctionne sur une page normale. Mais là je suis sous wordpress en version auto hébergé inutile de dire que le css il connait pas. Donc je dois tout traiter en HTML brut. J'ai fait quelques modifications en mettant tout sous 1 seul tableau en retirant des paramètres comme valign mais c'est aps encore tout à fait çà.
0
mpmp93 Messages postés 6652 Date d'inscription mercredi 13 avril 2011 Statut Membre Dernière intervention 28 septembre 2015 1 339
21 mai 2012 à 16:29
désolé, mais css embarqué dans la page web, c'est possible. Je vous ai mis l'exemple plus haut. Pour rappel:

<style type="text/css">
table { width: 100%; font: inherit; }
table tbody tr td { text-align: center; vertical-align: middle; width: 50%; }
table tbody tr td img { width: 150px; height: 112px; }
</style>

et ce juste avant votre <table>.....

A+
0
Merci à vous mpmp93 c'est réglé çà fonctionne. Merci encore.
0
Merci beaucoup beaucoup. Intégrer le code CSS a résolu le problème qui me prenait la tête depuis un très long moment !
0