So erstellen Sie eine zwei-Spalte E-Mail-newsletter
Ich versuche, erstellen einen zwei-Spalte E-Mail-flyer, aber ich habe Probleme mit der Codierung Outlook hasst CSS.
Ich bin mit Tabellen, um es so einfach wie möglich, aber ich möchte zwei getrennte Tabellen auf der linken und der rechten Seite, so kann ich hinzufügen, Daten in es, wie ich möchte.
Versuchte ich mit float
Links und rechts auf die beiden Tabellen, aber Outlook ignoriert diesen Stil.
Ich weiß, die beiden grauen Tabellen unten sind jeweils in einer eigenen "Halter" - Tabellen, aber dies ist, so kann ich duplizieren Sie die graue "Daten" - Tabellen, wenn ich das hinzufügen neuer Artikel.
<table class="all" width="auto" height="auto" border="0" cellspacing="0"><tr><td height="504">
<table width="750" height="140" border="0" cellspacing="0">
<tr>
<td width="200" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="345" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
</tr>
<tr>
<td width="200" valign="bottom" bgcolor="#E6E6E6"> </td>
<td align="center" valign="bottom" bgcolor="#E6E6E6"><font color="#111111" face="Arial Narrow" size="+2">DECEMBER NEWSLETTER</font></td>
<td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"><font size="2"><strong>#4 - <span class="orange">04.12.13</span></strong></font></td>
<td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="75" height="50" bgcolor="#E6E6E6" scope="row"> </td>
<td width="600" rowspan="2" scope="row"><img src="http://placehold.it/600x200"/></td>
<td width="75" bgcolor="#E6E6E6" scope="row"> </td>
</tr>
<tr>
<td width="75" height="81" scope="row"> </td>
<td scope="row"> </td>
</tr>
</table>
<table class="holder" width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" scope="row">
<table class="inlinetableleft" width="360">
<tr>
<td width="371" align="left">
<!------------LEFT COLUMN------------------>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<th height="103" colspan="4" align="left" valign="middle" bgcolor="#CCCCCC" scope="row"> </th>
</tr>
</table>
<!--------------LEFT COLUMN END------------->
</td>
</tr>
</table>
<table class="inlinetableright" width="360">
<tr>
<td align="left">
<!------------RIGHT COLUMN------------------>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="106" align="left" bgcolor="#CCCCCC" scope="row"> </td>
</tr>
</table>
<!-----------RIGHT COLUMN END-------------->
</td></tr>
</table>
</td>
</tr>
</table>
Hier ist eine Geige von meinem newsletter so weit, es ist die Unterseite zwei graue Tabellen, die ich sein will, Seite an Seite.
- Ich habe nicht hatte ein problem mit meinem breiten und Höhen. Es ist nur eine Falle, um meine newsletter zu arbeiten, ohne
float
Du musst angemeldet sein, um einen Kommentar abzugeben.
Für HTML-E-Mails, verschachtelte Tabellen sind dein Freund 🙂
JSFiddle
Hinweis: der Rahmen um die Tabelle ist nur um Ihnen zu zeigen, wo die Tische sind.
valign="top"
auf die<td>
tags dann. Vertikal ausrichten-Inhalt nach oben.valign="top"
sowohl<td>
- tags, aber es hatte keine Wirkung.<td>
Breite der Breite derzeit bei300
nicht die, die innerhalb der verschachtelten Tabelle. So<td width="300" valign="top">
sollte es tun. jsfiddle.net/fRp6Xvalign="top"
als inline-css. Ich wusste nicht, Sie könnten nur hinzufügenvalign="top"
direkt zum td 🙂