Suppression des espaces blancs entre les images d'une table

Je sais que cela a été fait avant, mais les solutions ne m'aide pas - je ne suis pas un programmeur, mais je peux le supporter de base du code HTML. J'essaie d'envoyer un email HTML que a 11 images placés dans un tableau de devenir une grande image - toutefois des lignes blanches apparaissent entre les lignes quand je l'envoyer.

J'ai de la table set de feuilles de style avec border="0" cellpadding="0" cellspacing="0" mais ce n'aide pas - quelqu'un peut-il me donner des conseils? Aussi comme je ne suis pas un programmeur, je ne peut pas comprendre tout complexe réponses!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled document</title>
</head>
<body>
<!-- Save for Web Slices (toast offer mailer 2.jpg) --> 
<table style="height: 920px;" id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/4/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_01.jpg" width="236" height="201" border="0" style="border: 0;"></a></td>
<td colspan="3"><a href="http://www.metroplan.co.uk/2012/#/78/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_02.jpg" width="177" height="201" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/10/"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_03.jpg" width="237" height="201" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_04.jpg" width="152" height="155"></td>
<td colspan="3"><a href="http://www.metroplan.co.uk/2012/#/116/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_05.jpg" width="173" height="155" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="http://www.metroplan.co.uk/2012/#/42/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_06.jpg" width="180" height="155" border="0" style="border: 0;"></a></td>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_07.jpg" width="145" height="155"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_08.jpg" width="650" height="237"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_09.jpg" width="650" height="231"></td>
</tr>
<tr>
<td colspan="3"><a href="http://www.metroplan.co.uk/"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_10.jpg" width="314" height="95" border="0" style="border: 0;"></a></td>
<td colspan="4"><a href="mailto:[email protected]"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_11.jpg" width="336" height="95" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="152" height="1"></td>
<td><img src="images/spacer.gif" width="84" height="1"></td>
<td><img src="images/spacer.gif" width="78" height="1"></td>
<td><img src="images/spacer.gif" width="11" height="1"></td>
<td><img src="images/spacer.gif" width="88" height="1"></td>
<td><img src="images/spacer.gif" width="92" height="1"></td>
<td><img src="images/spacer.gif" width="145" height="1"></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

source d'informationauteur user1468930

  1. 19

    Sur les images, essayez d'utiliser 

    style="display:block"

    Il devrait fonctionner.

  2. 6

    De vérification rapide je viens de le faire, on dirait que le problème est dû au vide de l'espace à l'intérieur des cellules de balisage de prendre de la place et en faisant les cellules plus grandes.

    Un moyen de contourner ce problème est de définir la taille de la police des cellules à 0 supprimant ainsi que de l'espace supplémentaire.

    En direct des cas de test avec le correctif appliqué.

    Dans votre cas, essayez d'ajouter ce point à l'HTML que vous envoyez:

    <style type="text/css">
table td { font-size: 0px; }
</style>

    C'est en supposant que vous avez une seule table et toutes les cellules ont seulement des images, si vous avez plus de tables, puis donner cette table spécifique id par exemple <table id="MyImagesTable"> puis changer:

    #MyImagesTable td { font-size: 0px; }

    Si le client de messagerie de ceux obtenir l'e-mail ne prend pas en charge les feuilles de style, vous devez définir manuellement pour chaque cellule:

    <table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0px;">...</td>
<td style="font-size: 0px;">...</td>
<td style="font-size: 0px;">...</td>
</tr>
<!-- ...more rows... -->
</table>
  3. 3

    J'ai aussi face à un même problème.

    Mais j'ai essayé 

    <img src ="images/xyz.jpg"  style="display:block">

    et résolu

  4. 1

    Ce problème est commun à de nombreux clients de messagerie, il suffit d'utiliser:

    <img style="display:block" />

    sur chaque image dans votre code HTML.

  5. 0

    Sans avoir vu ton code, je suppose que vous voyez les espaces entre vos images parce que vous avez l'espace réel entre vos images.

    Si vous avez quelque chose comme ça...

    <img src="image1.jpg">
<img src="image2.jpg">

    Le changer... (remarque il n'y a pas d'espace entre les deux balises d'image)

    <img src="image1.jpg"><img src="image2.jpg">

    Si vous êtes à placer les images dans des cellules individuelles (c'est à dire une image par cellule), puis essayez de mettre le CSS de border-collapse:collapse...

    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">

    Mise à JOUR

    @Shadow l'a souligné, ni des pièces de la ci-dessus qui fera toute la différence.

    Il semble que FireFox et Chrome traiter l'image comme un texte (pour quelque raison), donc sa suggestion de table td { font-size:0px; } est à mon humble avis la réponse correcte. (C'est à dire ne semblent pas être affectés par le problème.)

  6. 0

    Un grand nombre de ce qui est plat ignoré par certains clients de messagerie. C'est toujours le risque que vous prenez lourde graphique des e-mails html. Vous êtes presque garantis d'avoir des destinataires de voir correctement. J'encourage toujours mes clients de ne pas demander ce genre de e-mail des dessins qui sont de 6 à 12 images regroupées dans un tableau. Cependant, il y aura toujours ceux qui insistent-il être fait et même après que je leur montre les résultats de plusieurs clients de messagerie-ils encore de demande de il fait.

    Éviter si vous le pouvez. Malheureusement, il n'y a vraiment pas de garantie correctif.

    Si vous envoyez un e-mail à un groupe de destinataires qui sont tous dans le même client de messagerie, vous pouvez probablement le résoudre avec l'un des codes ci-dessus pour trouver celui de votre client de messagerie répond au mieux.

  7. -1

    beaucoup de fois il peut être erreur de l'utilisateur. lorsque vous tranchez dans photoshop, assurez-vous que TOUTES les TRANCHES SOIENT en contact. si il y a un 1px écart, qui vis tout!!!

    aussi, voici un truc que j'ai appris....

    Ensemble de toutes les images pour avoir un border="0" après balise alt=""...

    s'il y a des
    ** ** les étiquettes, et je veux dire seulement
    pas

    donc, pour l'exemple....

    essayer ça, et assurez-vous que toutes les images ont border="0" et toutes les balises ont une largeur définie, toutes les tranches sont en contact, et vous devez avoir 0 lacunes.