Question

我正在制作我的第一个电子邮件模板，我有一个问题。在电子邮件模板的正文中，有一个带有图像和描述（交易）的部分。我希望能够复制此代码以获得尽可能多的交易，而不会弄乱框架设计。当我在photoshop中进行设计时，我做了2笔交易。但是，当我复制并粘贴相同的代码以制作第三个代码时，我会重新设计。我知道它与我正在使用的帧的高度有关，但我还没能解决这个问题。 Photoshop使用带有aditional代码的spacer.gif生成了一些空格（在html代码的末尾）。如果我删除该设计分崩离析。我可以做什么？

谢谢，

涓。

以下是html代码的示例：

<html>
<head>
<title>email</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="680" height="900" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
        <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>

    </tr>
    <tr>
      <td width="212" height="89" colspan="2" bgcolor="#32322b">
          <img src="images/logo.png" width="212" height="89" alt="" /></td>
        <td width="370" height="89" bgcolor="#32322b" style="font-family:Arial, Helvetica, sans-serif; font-size:14pt; color:#FFFFFF; vertical-align:middle; font-weight: bold; text-align: center;" >Deals</td>
        <td width="72" height="89" colspan="2" bgcolor="#32322b">
      <img src="images/cupon.png" width="72" height="89" alt="" /></td>

    </tr>
    <tr>
        <td width="12" height="590" rowspan="5">&nbsp;</td>
        <td width="630" height="17" colspan="3">&nbsp;</td>
        <td width="12" height="590" rowspan="5">&nbsp;</td>

    </tr>
    <tr>
        <td width="630" height="130" colspan="3">
        <img src="images/Template-Email-kuponkis_10.jpg" width="630" height="130" alt="" /></td>

    </tr>
    <tr>
        <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
        <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
        <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>

    </tr>
    <tr>
        <td width="630" height="130" colspan="3">
        <img src="images/Template-Email-kuponkis_12.jpg" width="630" height="130" alt="" /></td>

    </tr>
    <tr>
            <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
        <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
        <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>


    </tr>
    <tr>
        <td width="654" height="15" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="654" height="44" colspan="5" bgcolor="#9ba9ce" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:center; vertical-align:middle;">¿Tiene dudas? Preguntas Frecuentes</td>

    </tr>
    <tr>
        <td width="654" height="144" colspan="5" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000; text-align: justify; vertical-align:top;"><p>&nbsp;</p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun. nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun</p></td>

    </tr>
    <tr>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="13" height="1"></td>
        <td width="12" height="1"></td>
        <td width="200" height="1"></td>
        <td width="370" height="1"></td>
        <td width="60" height="1"></td>
        <td width="12" height="1"></td>
        <td width="13" height="1"></td>
        <td width="1" height="1"></td>
    </tr>
</table>
</body>
</html>

Answer 1

您实际上遇到的问题来自您正在使用的rowspan属性。

<tr>
    <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>
    <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
    <td width="13" height="900" rowspan="11" bgcolor="#3b64aa">&nbsp;</td>

</tr>

和

<tr>
    <td width="12" height="590" rowspan="5">&nbsp;</td>
    <td width="630" height="17" colspan="3">&nbsp;</td>
    <td width="12" height="590" rowspan="5">&nbsp;</td>

</tr>

两者都在电子邮件中间的两侧创建空格，其中一列为蓝色，一列为白色，分别为11行和5行。

您列出的每笔交易都是您的表的两行，因此当您插入新的交易时，您还要向表中添加两行。您希望这两行具有相同的颜色和间距，因此您需要告诉颜色间距行进一步扩展。

<tr>
    <td width="13" height="900" rowspan="13" bgcolor="#3b64aa">&nbsp;</td>
    <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
    <td width="13" height="900" rowspan="13" bgcolor="#3b64aa">&nbsp;</td>

</tr>

和

<tr>
    <td width="12" height="590" rowspan="7">&nbsp;</td>
    <td width="630" height="17" colspan="3">&nbsp;</td>
    <td width="12" height="590" rowspan="7">&nbsp;</td>

</tr>

对于您添加或删除的每笔交易，将rowspan属性的值增加或减少。

如果您愿意，可以避免每次更改行数，方法是将交易放在自己的表中，放在较大表的一行中。像这样：

<html>
<head>
<title>email</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="680" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
    <tr>
        <td width="13" height="900" rowspan="8" bgcolor="#3b64aa">&nbsp;</td>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>
        <td width="13" height="900" rowspan="8" bgcolor="#3b64aa">&nbsp;</td>

    </tr>
    <tr>
      <td width="212" height="89" colspan="2" bgcolor="#32322b">
          <img src="images/logo.png" width="212" height="89" alt="" /></td>
        <td width="370" height="89" bgcolor="#32322b" style="font-family:Arial, Helvetica, sans-serif; font-size:14pt; color:#FFFFFF; vertical-align:middle; font-weight: bold; text-align: center;" >Deals</td>
        <td width="72" height="89" colspan="2" bgcolor="#32322b">
      <img src="images/cupon.png" width="72" height="89" alt="" /></td>

    </tr>
    <tr>
        <td width="12" height="590" rowspan="2">&nbsp;</td>
        <td width="630" height="17" colspan="3">&nbsp;</td>
        <td width="12" height="590" rowspan="2">&nbsp;</td>

    </tr>

    <tr> 
    <td colspan="3">
    <table border="0" align="center" cellpadding="0" cellspacing="0">

        <tr>
             <td width="630" height="130" colspan="3">
            <img src ="images/Template-Email-kuponkis_10.jpg" width="630" height="130" alt="" /></td>

        </tr>
        <tr>
            <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
            <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
            <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
            <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>

        </tr>
        <tr>
            <td width="630" height="130" colspan="3">
            <img src="images/Template-Email-kuponkis_12.jpg" width="630" height="130" alt="" /></td>

        </tr>
        <tr>
            <td width="630" height="155" colspan="3" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:left; vertical-align:top;" ><p><strong>Nombre de la promoción</strong></p>
            <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.</p>
            <p>Oferta valida desde <strong style="color:#1f52aa">Mar 1 de 2013</strong> hasta <strong style="color:#1f52aa">Junio 10 de 2013</strong></p>
            <p> <del>$1.000.000</del><strong style="color:#1f52aa; font-size:18px"> $800.000</strong></p></td>

        </tr>

    </table>
    </td>
    </tr>

    <tr>
        <td width="654" height="15" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="654" height="44" colspan="5" bgcolor="#9ba9ce" style="font-family:Arial, Helvetica, sans-serif; font-size:14px; color:#000; text-align:center; vertical-align:middle;">¿Tiene dudas? Preguntas Frecuentes</td>

    </tr>
    <tr>
        <td width="654" height="144" colspan="5" style="font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#000; text-align: justify; vertical-align:top;"><p>&nbsp;</p>
        <p>nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nunc.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun. nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun.nteger vestibulum dapibus fermentum. Ut vulputate sem a arcu posuere in mollis sem commodo. Donec nunc nunc, pretium ac accumsan eu, vehicula in urna. Nam orci lectus, pellentesque ut laoreet vel, interdum ac nun</p></td>

    </tr>
    <tr>
        <td width="654" height="9" colspan="5" bgcolor="#3b64aa"></td>

    </tr>
    <tr>
        <td width="13" height="1"></td>
        <td width="12" height="1"></td>
        <td width="200" height="1"></td>
        <td width="370" height="1"></td>
        <td width="60" height="1"></td>
        <td width="12" height="1"></td>
        <td width="13" height="1"></td>
        <td width="1" height="1"></td>
    </tr>
</table>
</body>
</html>

这样，您可以根据需要随意复制交易而不更改行数，因为就封闭表而言，它们只有一行高。

在电子邮件模板中复制html代码而不会弄乱格式

1 个答案: