展望中的水平空间答案

【问题标题】：Horizontal spaces in outlook展望中的水平空间
【发布时间】：2014-03-11 15:04:59
【问题描述】：

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

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

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

<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 colspan="8">
            <img border="0" style="display: block;" src="" width="600" height="98" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img border="0" style="display: block;" src="" width="600" height="119" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img border="0" style="display: block;" src="" width="182" height="442" alt=""></td>
        <td colspan="6">
            <img border="0" style="display: block;" src="" width="418" height="442" alt=""></td>
    </tr>
    <tr>
        <td colspan="2">
            <img border="0" style="display: block;" src="" width="182" height="51" alt=""></td>
        <td>
            <img border="0" style="display: block;" src="" width="140" height="51" alt=""></td>
        <td colspan="5">
            <img border="0" style="display: block;" src="" width="278" height="51" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img border="0" style="display: block;" src="" width="600" height="128" alt=""></td>
    </tr>
    <tr>
        <td>
            <img border="0" style="display: block;" src="" width="150" height="91" alt=""></td>
        <td colspan="3">
            <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 colspan="2">
            <img border="0" style="display: block;" src="" width="55" height="91" alt=""></td>
    </tr>
    <tr>
        <td colspan="8">
            <img border="0" style="display: block;" src="" width="600" height="79" alt=""></td>
    </tr>
    <tr>
        <td colspan="7">
            <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>
    <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>
<!-- End Save for Web Slices -->
</body>
</html>

【问题讨论】：

标签： outlook html-email

【解决方案1】：

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

话虽如此，您会得到垂直间隙，因为当您在第一行中使用 colspan 时，Outlook 不知道每个 cols 的宽度。请参阅 this answer 了解有关如何强制使用 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>

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

  <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>

【讨论】：

我同意这是非常糟糕的做法。但是，当您的客户强迫您每天使用三个自定义电子邮件模板创建和发送爆炸，而这些模板必须在 20 多个电子邮件客户端中运行时，真的别无选择。我已经尝试过您之前链接的解决方案，但它没有解决任何问题。不过会再试一次。
实际上，链接到的解决方案无法正常工作，因为某些行的 TD 宽度不同。
这在 html 中永远不会起作用。您必须使所有行中的所有<td> 宽度都相同，除非您跨越多个<td>（然后它仍然需要加起来等于您跨越的单元格的总宽度）。如果你想做你所要求的，你需要在一个更大的跨越 <td> 行中嵌套一个新表。然后，您可以在该表内建立新的宽度。
在这个特定的例子中，它通过在 TD 上添加宽度来工作。但我从经验中知道这种方法是不可靠的。我将来会使用嵌套表。糟透了，您需要创建一个 frickin TABLE 来模仿图像旁边浮动文本的效果或具有不同的 td 宽度......使用嵌套表格方法，我在一封电子邮件中实际上有多达 15 个表格。这很荒谬，但我想这就是多亏了微软。

【解决方案2】：

我能够通过在每个 TD 上添加宽度来解决此问题。

【讨论】：