Question

我正在尝试为我的公司创建一个“酷”的电子邮件签名，只使用文本和HTML，没有任何图像。我试图仅使用表重新创建我们公司的徽标，因为它基本上是一个具有不同bg颜色的四格单元表。一开始似乎很容易变得非常讨厌。它显然在浏览器中看起来不错，但是一旦我将它粘贴到Outlook 2013中，单元格就不会保留它们的高度和宽度值。有关如何在大多数当前电子邮件客户端中使用的任何建议吗？

http://codepen.io/anon/pen/wqaLm

Answer 1

首先，一种好的技术是将您的细胞设计成内联样式，如：

    <td style="width:10px; height:10px;">

其次：看一下这篇文章：＆＃34; A complete breakdown of the CSS support for every popular mobile, web and desktop email client＆＃34;

Answer 2

这是一个基本的例子。不确定徽标的确切外观，所以这里有几个版本。如果您希望单元格之间的间隙小于20px，则需要使用第三种技术。这是因为Outlook在大约19px的单元格上具有最小高度，这将在行之间产生更大的间隙。

<table width="100" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="50" height="50" bgcolor="#333333">&nbsp;
    </td>
    <td width="50" height="50" bgcolor="#555555">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="50" height="50" bgcolor="#444444">&nbsp;
    </td>
    <td width="50" height="50" bgcolor="#666666">&nbsp;
    </td>
  </tr>
</table>

<br><br>

<table width="100" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="40" height="40" bgcolor="#333333">&nbsp;
    </td>
    <td width="20" height="40">&nbsp;
    </td>
    <td width="40" height="40" bgcolor="#555555">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="40" height="20">&nbsp;
    </td>
    <td width="20" height="20">&nbsp;
    </td>
    <td width="40" height="20">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="40" height="40" bgcolor="#444444">&nbsp;
    </td>
    <td width="20" height="40">&nbsp;
    </td>
    <td width="40" height="40" bgcolor="#666666">&nbsp;
    </td>
  </tr>
</table>

<br><br>

<table width="60" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="30" height="30" align="left" valign="top">
      <table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#333333">&nbsp;

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

    </td>
    <td width="30" height="30" align="right" valign="top">
      <table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#555555">&nbsp;

          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td width="30" height="30" align="left" valign="bottom">
      <table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#444444">&nbsp;

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

    </td>
    <td width="30" height="30" align="right" valign="bottom">
      <table width="25" height="25" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td bgcolor="#666666">&nbsp;

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

使用表格创建跨客户端电子邮件徽标，无图像

2 个答案: