outlook中的水平空间_Outlook_Html Email

outlook中的水平空间

outlook

outlook中的水平空间,outlook,html-email,Outlook,Html Email,我正在使用所有常用的技巧：在img上使用border=“0”，在img上使用style:display:block。。。似乎什么都不管用。我不会说我在photoshop中对图像进行切片，并使用“保存为web”导出，另存为“HTML和图像”。每次我使用这种切片方法时，这种情况都会发生。PS功能编写基于表的标记，这非常适合电子邮件（因为您不能使用div，而期望它们在电子邮件模板中工作）有时，我会使用不同的区域重新许可所有内容，这是可行的，但这是一个很大的工作。我想在我第一次切东西的时候把它做好！是

我正在使用所有常用的技巧：在img上使用border=“0”，在img上使用style:display:block。。。似乎什么都不管用。我不会说我在photoshop中对图像进行切片，并使用“保存为web”导出，另存为“HTML和图像”。每次我使用这种切片方法时，这种情况都会发生。PS功能编写基于表的标记，这非常适合电子邮件（因为您不能使用div，而期望它们在电子邮件模板中工作）

有时，我会使用不同的区域重新许可所有内容，这是可行的，但这是一个很大的工作。我想在我第一次切东西的时候把它做好！是的，我已经阅读了关于outlook中水平空间的所有主题，但似乎没有任何效果

以下是标记（图像位置已删除）：

构建完整的图像电子邮件是一种非常糟糕的做法。默认情况下，它不会在大多数电子邮件客户端中呈现，下载需要很长时间，并且会触发一些垃圾邮件过滤器，因为您的图像与文本的比率很低

也就是说，您得到的是垂直间距，因为当您在第一行使用colspan时，Outlook不知道每个COL的宽度。有关如何强制设置列宽度的详细信息，请参见

更新-因为要改变单元格的宽度，所以需要使用嵌套表。不能在各行之间更改表格的宽度。下面是一个示例，说明如何使用嵌套表构造整个电子邮件，而不使用单个colspan：

<html>
<head>
<title></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">
<!-- Save for Web Slices -->
<table id="Table_01" width="600" height="1093" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="98" alt="">
        </td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="119" alt="">
        </td>
    </tr>
    <tr>
      <td>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td>
                <img border="0" style="display: block;" src="" width="150" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="315" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="38" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="42" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="55" height="91" alt="">
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
        <td>
            <img border="0" style="display: block;" src="" width="182" height="442" alt="">
        </td>
        <td>
            <img border="0" style="display: block;" src="" width="418" height="442" alt="">
        </td>
        </tr>
      </table>
      </td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="128" alt="">
        </td>
    </tr>
    <tr>
        <td>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                  <img border="0" style="display: block;" src="" width="150" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="315" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="38" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="42" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="55" height="91" alt="">
              </td>
            </tr>
          </table>
        </td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="79" alt="">
        </td>
    </tr>
    <tr>
        <td>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                  <img border="0" style="display: block;" src="" width="599" height="84" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="1" height="84" alt="">
              </td>
            </tr>
          </table>
        </td>
    </tr>
    <tr>
        <td>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                  <img border="0" style="display: block;" src="" width="150" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="32" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="140" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="143" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="38" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="42" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="54" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="1" height="1" alt="">
              </td>
            </tr>
          </table>
        </td>


    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

正如我前面提到的，应该避免使用图像，在文本所在的位置使用文本，而不是文本的图像。下面是一个示例，说明中间部分的外观（图像堆叠在左侧，文本堆叠在右侧的部分）：


文本1
文本2
文本3

我可以通过在每个TDs上添加宽度来解决问题。

我同意这是一种非常糟糕的做法。然而，当你的客户强迫你每天使用三个自定义的电子邮件模板创建和发送爆炸，这些模板必须在20多个电子邮件客户机中工作时，真的没有其他选择。我以前尝试过你链接到的解决方案，但没有解决任何问题。不过，我将重试此电子邮件。实际上，链接到的解决方案无法工作，因为某些行具有不同的TD宽度。这在html中永远不会工作。所有行中的所有

宽度必须相同，但跨越多个

时除外（然后它仍然需要加起来等于所跨越单元格的总宽度）。如果你想做你想做的事情，你需要在一个更大的

行中嵌套一个新表。然后，您可以在该表中建立新的宽度。在这个特定的实例中，它通过在TDs上添加宽度来工作。但根据经验，我知道这种方法是不可靠的。将来我将使用嵌套表。糟糕的是，你需要创建一个frickin表格来模拟图像旁边浮动文本的效果，或者具有不同的td宽度。。。使用嵌套表方法，我在一封电子邮件中有多达15个表。这是荒谬的，但我想这正是微软的功劳。

<html>
<head>
<title></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">
<!-- Save for Web Slices -->
<table id="Table_01" width="600" height="1093" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="98" alt="">
        </td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="119" alt="">
        </td>
    </tr>
    <tr>
      <td>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td>
                <img border="0" style="display: block;" src="" width="150" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="315" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="38" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="42" height="91" alt="">
            </td>
            <td>
                <img border="0" style="display: block;" src="" width="55" height="91" alt="">
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
        <td>
            <img border="0" style="display: block;" src="" width="182" height="442" alt="">
        </td>
        <td>
            <img border="0" style="display: block;" src="" width="418" height="442" alt="">
        </td>
        </tr>
      </table>
      </td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="128" alt="">
        </td>
    </tr>
    <tr>
        <td>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                  <img border="0" style="display: block;" src="" width="150" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="315" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="38" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="42" height="91" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="55" height="91" alt="">
              </td>
            </tr>
          </table>
        </td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="600" height="79" alt="">
        </td>
    </tr>
    <tr>
        <td>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                  <img border="0" style="display: block;" src="" width="599" height="84" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="1" height="84" alt="">
              </td>
            </tr>
          </table>
        </td>
    </tr>
    <tr>
        <td>
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td>
                  <img border="0" style="display: block;" src="" width="150" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="32" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="140" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="143" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="38" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="42" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="54" height="1" alt="">
              </td>
              <td>
                  <img border="0" style="display: block;" src="" width="1" height="1" alt="">
              </td>
            </tr>
          </table>
        </td>


    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="182" style="padding-bottom:20px;">
          <img border="0" style="display: block;" src="" width="182" height="120" alt="">
      </td>
      <td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
          Text 1
      </td>
    </tr>
    <tr>
      <td width="182" style="padding-bottom:20px;">
          <img border="0" style="display: block;" src="" width="182" height="120" alt="">
      </td>
      <td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
          Text 2
      </td>
    </tr>
    <tr>
      <td width="182" style="padding-bottom:20px;">
          <img border="0" style="display: block;" src="" width="182" height="120" alt="">
      </td>
      <td width="418" valign="top" align="left" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000000; padding:20px;">
          Text 3
      </td>
    </tr>
  </table>