展望中的横向空间

时间：2014-03-11 15:05:00

标签： outlook html-email

enter image description here

我正在使用所有常用的技巧：在img上使用border =“0”，样式：显示：在img上阻止...似乎没有任何效果。我不会说我在photoshop中剪切图像并使用“为网络保存”导出，另存为“HTML和图像”。每次我使用这种切片方法时都会发生这种情况。 PS功能写入基于表格的标记，这是电子邮件的理想选择（因为您不能使用div并期望它们在电子邮件模板中工作）。

有时我会使用不同的区域来重新制作所有内容并且它可以工作，但这是很多工作。我想在第一次切片时把它弄好！是的，我已经阅读了有关Outlook中水平空间的所有主题，似乎没有任何效果。

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

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

2 个答案:

答案 0 :(得分：1)

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

话虽这么说，你正在获得垂直差距，因为当你在第一行使用colspan时，Outlook并不知道你的每个cols有多宽。有关如何强制校准宽度的详细信息，请参阅this answer。

更新 - 因为您想要改变单元格的宽度，所以需要使用嵌套表格。您无法在行与行之间更改表的宽度。以下是如何使用嵌套表构建整个电子邮件并且没有单个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>

答案 1 :(得分：1)

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

相关问题
最新问题