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>

<强> ROWSPAN：

比colspan更加避免的是rowspan。我发现它实际上可以比嵌套表更一致地显示，具体取决于您的目标受众。这是因为从Outlook转发电子邮件时，行（特别是跨区域）与表格的分离程度不同，因为<p class="msoNormal">标记Outlook包裹它们。如果有人forwards your email to 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的情况下完成与此类似的操作，您必须将矩形表格单元格拆分为小方块。想象一下，如果右上角的单元格是与标题see this question for a real world example重叠的图像。如果你要避免使用rowpans并在两个堆叠的单元格中水平分割徽标图像，那么当Outlook执行它时，这将成为问题。没有人喜欢他们形象的接缝。

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

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

Answer 2

只是认为id为你的问题添加了一些输入

可以使用Colspan，但我建议反对它。每当我创建电子邮件（6个月的经验）时，我总是使用嵌套表。此外，您只能在电子邮件中使用内联css，因此我会非常小心地使用边距和填充。

我在每封电子邮件中都做了很多事情。

始终在页面上的每个图片中使用此代码。它将纠正图像错误下面的gmail空间。

style="display:block"

在任何图像链接上也使用border =“0”来停止出现蓝色边框。

我希望这有帮助！

Answer 3

除了style =“display：block”之外，另一个提示是在图像中添加line-height：0 - 这可以解决Outlook 2007中奇怪的空白错误。

我一直使用colspans，但也尽可能使用嵌套表 - 避免使用rowpans - 它们是噩梦，当你做巢表时不要太疯狂并且嵌套4/5或6，我发现它开始淤泥事情发生了。

Answer 4

是的。大多数（如果不是全部）电子邮件客户端都允许所有HTML标记。说到脚本，那么你就有一个问题需要解决，因为大多数（如果不是全部）电子邮件客户端都不允许编写脚本。

Answer 5

Rowspans和Colspans没问题，但强烈建议你使用嵌套表。您将拥有额外的代码行，但是，这将使您免于其他电子邮件客户端的任何中断。

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

5 个答案: