HTML 电子邮件 - 是否允许 colspan？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9697788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Email - Is colspan allowed?
提问by CallumVass
I was wondering if I use colspan attribute in a HTML table that I intend to have as an email, will email clients (Outlook etc...) understand what colspan does, as I have read that this might cause an issue with the layout?
我想知道我是否在打算作为电子邮件使用的 HTML 表中使用 colspan 属性，电子邮件客户端（Outlook 等...）是否会理解 colspan 的作用，因为我已经读到这可能会导致布局出现问题？
采纳答案by DoctorLouie
Yep. All HTML markup is allowed in most if not all email clients. When it comes to scripting, then you've got an issue to contend with, for scripting is simply not allowed by most if not all email clients.
是的。大多数（如果不是所有）电子邮件客户端都允许使用所有 HTML 标记。说到脚本编写，您就有一个问题需要解决，因为如果不是所有电子邮件客户端，大多数电子邮件客户端根本不允许编写脚本。
回答by John
Colspan and rowspan are both fully supported in all major email clients. They are more difficult, but if you get it right they are a great option in combination with nested tables.
所有主要电子邮件客户端都完全支持 Colspan 和 rowspan。它们更难，但如果你做对了，它们与嵌套表结合是一个很好的选择。
The reason they have a bad reputation, besides the difficulty is because there is a particular quirk in Outlook you need to take into consideration, otherwise your layout can break.
他们名声不佳的原因，除了困难之外，是因为您需要考虑 Outlook 中的一个特殊怪癖，否则您的布局可能会中断。
Colspan:
科尔斯潘：
Outlook has an issue where if you put a colspan in the first row of a table, it will mess up the widths of the subsequent rows. The work around for this is that you need to specify your cell widths in the top row, even if it is an empty row.
Outlook 有一个问题，如果您将 colspan 放在表格的第一行，则会弄乱后续行的宽度。解决方法是您需要在顶行指定单元格宽度，即使它是空行。
Here is an example:
下面是一个例子：
<!-- 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">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</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">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
Rowspan:
行跨度：
Even more avoided than colspan is rowspan. I've found it can actually display more consistently than nesting tables depending on your target audience. This is because rows (particularly a spanned one) do not separate as much as tables when forwarding the email from Outlook due to the <p class="msoNormal">tags Outlook wraps around them. These gaps are particularly unavoidable if someone forwards your email to Gmail.
比 colspan 更避免的是 rowspan。我发现它实际上可以比嵌套表更一致地显示，具体取决于您的目标受众。这是因为在从 Outlook 转发电子邮件时，由于<p class="msoNormal">Outlook 环绕它们的标签，行（尤其是跨行的）不会像表格那样分开。如果有人将您的电子邮件转发到 Gmail，这些差距尤其不可避免。
One thing to note is that rowspan doesn't seem to work with Blackberry (which I wouldn't consider a major client). So like with anything in html email, you need to play the percentages game and decide where you least want it to break.
需要注意的一件事是 rowspan 似乎不适用于 Blackberry（我不会将其视为主要客户）。因此，就像 html 电子邮件中的任何内容一样，您需要玩百分比游戏并决定您最不希望它中断的地方。
A basic example of colspan and rowspan working together:
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>
To accomplish something similar to this without rowspan/colspan, you would have to split the rectangular table cells into small squares. Imagine if the top right cell was an image overlapping the header see this question for a real world example. If you were to avoid rowspans and split the logo image horizontally within two stacked cells, this would become problematic when Outlook does it's msoNormal thing. Nobody likes a seam in their image.
要在没有 rowspan/colspan 的情况下完成类似的操作，您必须将矩形表格单元格拆分为小方块。想象一下，如果右上角的单元格是与标题重叠的图像，请参阅此问题的真实示例。如果您要避免行跨度并在两个堆叠的单元格内水平拆分徽标图像，那么当 Outlook 执行 msoNormal 操作时，这将成为问题。没有人喜欢他们图像中的接缝。
In html email, you can always split images vertically without any risk of seams/gaps, but as a rule, you should always avoid splitting an image horizontally. Rowspan helps to avoid this in scenarios when you want overlapping images.
在 html 电子邮件中，您始终可以垂直拆分图像而没有任何接缝/间隙的风险，但作为一项规则，您应该始终避免水平拆分图像。当您想要重叠图像时，Rowspan 有助于避免这种情况。
One last note - Outlook also has the same spanning issue with rowspan as it does with colspan. You need to establish your row heights in the first column for it to respect the heights of the subsequent spanned rows. Here is an example of that. Note the first cell in each row is empty.
最后一个注意事项 - Outlook 的 rowspan 也有与 colspan 相同的跨度问题。您需要在第一列中建立行高，以使其尊重后续跨行的高度。这是一个例子。请注意，每行中的第一个单元格为空。
回答by Undefined
Just thought id add a bit of input to your question
只是认为 id 为您的问题添加了一些输入
Colspan can be used but i would suggest against it. Whenever i create emails (6 months experience) i have always used nested tables. Also you can only use inline css in emails so i would be very careful using even margin and padding.
可以使用 Colspan，但我建议不要使用它。每当我创建电子邮件（6 个月的经验）时，我总是使用嵌套表。此外，您只能在电子邮件中使用内联 css，因此我会非常小心地使用边距和填充。
Couple of things i do on every email.
我在每封电子邮件中都会做几件事。
Always use this code in every image on your page. It will correct a gmail space below the image bug.
始终在页面上的每个图像中使用此代码。它将更正图像错误下方的 gmail 空间。
style="display:block"
Also use border="0" on any image links to stop a blue border appearing.
还可以在任何图像链接上使用 border="0" 来停止出现蓝色边框。
I hope this helps!
我希望这有帮助！
回答by mrbirch
Another tip in addition to the style="display:block' is to add line-height:0 on the with an image in - this sorts out the odd whitespace bug in Outlook 2007.
除了 style="display:block" 之外的另一个技巧是在带有图像的地方添加 line-height:0 - 这可以解决 Outlook 2007 中奇怪的空白错误。
I use colspans all the time but also nest tables where possible - avoid rowspans - they are are nightmare, and when you do nest tables don't go too mad and nest 4 / 5 or 6, I find that starts to muck things up.
我一直使用 colspans 但也尽可能嵌套表 - 避免 rowspans - 它们是噩梦，当你嵌套表时不要太疯狂并且嵌套 4 / 5 或 6，我发现这开始把事情搞砸了。
回答by Sambydev
Rowspans and Colspans are okay but I would strongly suggest you use nested tables. You will have extra lines of code, however, this will save you from any breaks on other email clients.
Rowspans 和 Colspans 没问题，但我强烈建议您使用嵌套表。您将有额外的代码行，但是，这将使您免受其他电子邮件客户端的任何中断。
