HTML电子邮件 - 允许使用colspan吗？

Question

我想知道我是否在HTML表格中使用colspan属性,我打算将其作为电子邮件,电子邮件客户端(Outlook等等)了解colspan的作用,因为我已经读过这可能会导致布局出现问题？

Answer 1

所有主要电子邮件客户端都完全支持Colspan和rowspan.它们更难,但如果你做得对,它们与嵌套表结合使用是一个很好的选择.

除了困难之外,他们声名狼借的原因是因为Outlook中需要考虑一个特殊的怪癖,否则你的布局会破裂.

colspan属性:

Outlook有一个问题,如果你将一个colspan放在一个表的第一行,它将弄乱后续行的宽度.解决此问题的方法是,您需要在顶行指定单元格宽度,即使它是空行.

这是一个例子:

<!-- the second row in this example will not respect the specified widths in Outlook  -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="600" colspan="3" bgcolor="#757575">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="200" bgcolor="#353535">&nbsp;
    </td>
    <td width="400" bgcolor="#454545">&nbsp;
    </td>
    <td width="200" bgcolor="#555555">&nbsp;
    </td>
  </tr>
</table>


<!-- here is the fix - note the empty row at the top enforces the specified width in Outlook  -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200">
    </td>
    <td width="400">
    </td>
    <td width="200">
    </td>
  </tr>
  <tr>
    <td width="600" colspan="3" bgcolor="#757575">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="200" bgcolor="#353535">&nbsp;
    </td>
    <td width="400" bgcolor="#454545">&nbsp;
    </td>
    <td width="200" bgcolor="#555555">&nbsp;
    </td>
  </tr>
</table>

行跨度:

比colspan更加避免的是rowspan.我发现它实际上可以比嵌套表更一致地显示,具体取决于您的目标受众.这是因为从Outlook转发电子邮件时,行(特别是跨区域)与表格的分离程度不同,因为<p class="msoNormal">Outlook会将它们包裹起来.如果有人将您的电子邮件转发到Gmail,这些差距尤其不可避免.

有一点需要注意的是,rowspan似乎不适用于Blackberry(我不认为是主要客户端).因此,与html电子邮件中的任何内容一样,您需要玩百分比游戏并决定最不希望它打破的位置.

colspan和rowspan一起工​​作的基本示例:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr><!-- hidden row to establish widths in Outlook -->
    <td width="200">
    </td>
    <td width="200">
    </td>
    <td width="200">
    </td>
  </tr>
  <tr>
    <td width="400" height="200" colspan="2" bgcolor="#333333">...
    </td>
    <td width="200" height="400" rowspan="2" bgcolor="#444444">...
    </td>
  </tr>
  <tr>
    <td width="200" height="400" rowspan="2" bgcolor="#555555">...
    </td>
    <td width="200" height="200" bgcolor="#666666">...
    </td>
    </tr>
    <tr>
    <td width="400" height="200" colspan="2" bgcolor="#777777">...
    </td>
  </tr>
</table>

要在没有rowspan/colspan的情况下完成与此类似的操作,您必须将矩形表格单元格拆分为小方块.想象一下,如果右上角的单元格是与标题重叠的图像,请参阅此问题以获得真实世界的示例.如果你要避免使用rowpans并在两个堆叠的单元格中水平分割徽标图像,那么当Outlook执行它时,这将成为问题.没有人喜欢他们形象的接缝.

在html电子邮件中,您始终可以垂直分割图像而不会有任何接缝/间隙的风险,但通常应始终避免水平分割图像.当您想要重叠图像时,Rowspan有助于避免这种情况.

最后一点 - Outlook与rowsp一样具有与colspan相同的跨越问题.您需要在第一列中确定行高,以便尊重后续跨行的高度.这是一个例子.请注意,每行中的第一个单元格为空.

Answer 2

是的。大多数（如果不是全部）电子邮件客户端都允许所有 HTML 标记。当涉及到脚本时，您就需要解决一个问题，因为大多数（如果不是全部）电子邮件客户端根本不允许使用脚本。