1
Ich arbeite an HTML-E-Mail-Vorlage. Ich habe es mit ein paar geschachtelten Tabellen erstellt. Ich habe festgestellt, dass sich in Outlook rechts neben den Bildern Leerzeichen befinden. Also habe ich versucht, das zu beheben, aber es repariert nicht. Schließlich erstelle ich eine einfache Vorlage in Abhängigkeit von farbigen Bildern, die ich erstelle, um die Tabellenzellen identifizieren zu können.Vertikaler Abstand zwischen Bildern in HTML-E-Mail
Hier ist mein Code (Bitte kopieren und Test auf Outlook):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
\t <head>
\t \t <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
\t \t <title>HTML Email Design Template</title>
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
\t \t <style media="all" type="text/css">
\t \t table td {
\t \t \t border-collapse: collapse;
\t \t }
\t \t img { padding: 0; margin: 0; display:block;}
\t \t </style>
\t </head>
\t <body style="margin: 0; padding: 0;" bgcolor="#cccccc">
\t \t <table border="0" cellpadding="0" cellspacing="0" width="100%">
\t \t \t <tr>
\t \t \t \t <td>
\t \t \t \t \t <table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" width="600" height="600" style="border-collapse: collapse; border: 1px solid #000000;">
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
\t \t \t \t \t \t \t \t First Row
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td>
\t \t \t \t \t \t \t \t <table width="600" height="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#08336d">
\t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t <td width="300" height="600">
\t \t \t \t \t \t \t \t \t \t \t <img src="http://2a-web.com/email/test/images/img-01.jpg" width="300px" height="600px" border="0" style="display:block; line-height:0; font-size:0;"/>
\t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t <td width="300" height="600">
\t \t \t \t \t \t \t \t \t \t \t <table width="300" border="0" cellpadding="0" cellspacing="0">
\t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t <td width="300" height="300">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <img src="http://2a-web.com/email/test/images/img-02.jpg" width="300px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
\t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t <td width="300" height="300">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <table width="300" height="300" border="0" cellpadding="0" cellspacing="0">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td width="150" height="300">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <img src="http://2a-web.com/email/test/images/img-03.jpg" width="150px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td width="150" height="300" bgcolor="#ffc33c">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <table width="150" border="0" cellpadding="0" cellspacing="0">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td width="150" height="150">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <img src="http://2a-web.com/email/test/images/img-04.jpg" width="150px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td width="150" height="150" bgcolor="#16b512">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <table width="150" border="0" cellpadding="0" cellspacing="0">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td width="75" height="150">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <img src="http://2a-web.com/email/test/images/img-05.jpg" width="75px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td width="75" height="150">
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <img src="http://2a-web.com/email/test/images/img-06.jpg" width="75px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </table>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </table>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </table>
\t \t \t \t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t \t \t \t </table>
\t \t \t \t \t \t \t \t \t \t </td>
\t \t \t \t \t \t \t \t \t </tr>
\t \t \t \t \t \t \t \t </table>
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t \t <tr>
\t \t \t \t \t \t \t <td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
\t \t \t \t \t \t \t \t Third Row
\t \t \t \t \t \t \t </td>
\t \t \t \t \t \t </tr>
\t \t \t \t \t </table>
\t \t \t \t </td>
\t \t \t </tr>
\t \t </table>
\t </body>
</html>Also, wie kann ich die Lücke zwischen den Zellen zu entfernen?
Ich freue mich über Ihre Hilfe.
'tabelle {border-collapse: collapse; mso-tabelle-lspace: 0pt; mso-tabelle-rspace: 0pt; } ' –