Wei*_*ime 1 html html-table html-email
我对 HTML 电子邮件开发比较陌生，我正在尝试了解嵌套表，特别是何时嵌套表、创建 tr 标记对或添加 td 标记对。\n下面是代码来自位于此 URL 的 HTML 电子邮件的真实示例的片段，以说明我的困惑的基础：https://reallygoodemails.com/emails/save-30-for-our-winter-sale/live
\n<body style="margin:0; padding:0; min-width:100%; background-color:transparent;">\n <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">Our Winter Sale gets better</div>\n <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌\n ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌</div>\n <table width="100%" class="body" cellpadding="0" cellspacing="0" border="0" role="presentation">\n <tr>\n <td style="background-color:transparent;">\n <table width="100%" class="Wrapper" cellpadding="0" cellspacing="0" border="0" role="presentation">\n <tr>\n <td align="center" style="background-color:transparent; border-top-style: none; border-bottom-style: none; border-right-style: none; border-left-style: none; border-top-width: 0px; border-bottom-width: 0px; border-right-width: 0px; border-left-width: 0px; border-color: #222222;">\n\n <!--[if(gte mso 9)|(IE)]><table width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px;" role="presentation"> <tr> <td align="center"><![endif]-->\n <table width="100%" class="Container" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;" role="presentation">\n <tr>\n <td align="center" style="background-color:#000000">\n <table width="100%" class="Column-1 " cellpadding="0" cellspacing="0" border="0" role="presentation">\n <tr>\n <td align="center">\n <table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">\n <tr class="text">\n <td style="padding: 10px 10px 10px 10px; border-width: 0px; border-style: none; font-family: \'soehne-web-buch\', Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color: #222222; line-height: 1.5; text-align: center">\n <p style="margin: 0px; padding: 0px;"><span style="color:rgb(255, 255, 255); font-family:neusanextpro-condensedlight,arial,helvetica,sans-serif"><span style="letter-spacing:2px"><i><a href="http://enews.saxxunderwear.com/q/R9jim0BXYC7rm0Xq39_vyPg_M10yCZNUNEHZcLOJbWF0dGhld0ByZWFsbHlnb29kZW1haWxzLmNvbcOIPt_chqcYdIroPVYZqAC1RDbf1A" style="color:#ffffff;text-decoration:none;" target=\n"_blank" title="SET UP AN ACCOUNT TO BE ELIGIBLE FOR FREE SHIPPING" data-link-name="WINTER SALE: 30% OFF.">WINTER SALE: 30% OFF.</a> FREE SHIPPING AVAILABLE WITH AN ACCOUNT. <a href="http://enews.saxxunderwear.com/q/fyo89AKFHe5xD0XpfKsqmahpuN9CevUgh5UZcOJbWF0dGhld0ByLZWFsbHlnb29kZW1haWxzLmNvbcOIQzNjZV5Pcr0eVO1_pLw6d0szaw" style="color:#ffffff;text-decoration:underline;" target="_blank" title=\n"" data-link-name="LEARN MORE"><u>LEARN MORE</u></a><a href="http://enews.saxxunderwear.com/q/YSTmkctvfNwLo0XGaNue3OjIVQObNHs2jWDZcOJbWF0dLGhld0ByZWFsbHlnb29kZW1haWxzLmNvbcOIlmZZNFUuc7bp4ycY1kS-E55mUQ" style="color:#ffffff;text-decoration:underline;" target="_blank" title="" data-link-name="."><u>.</u></a></i></span></span></p>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>这里有六个表和\xe2\x80\x94，尽管我了解表1和表6在做什么\xe2\x80\x94，但其他四个表令人困惑。
\n表 2 看起来定义了页面的包装器。但是\xe2\x80\x99t 表 1 已经做到了这一点吗？如果是这样，为什么它在那里？
\n表 3 和表 4 看起来都充当 HTML 电子邮件模板的主容器，因为它们都定义了主表的宽度。但我不明白\xe2\x80\x99不明白为什么当表4指定相同的600px宽度时表3是必要的？
\n表 5 有一个 \xe2\x80\x9cColumn-1\xe2\x80\x9d 类，但样式表中没有 \xe2\x80\x99t 标记为 \xe2\x80\x9cColumn-1\xe2\x80\x9d 的类在文件的头部找到了，那为什么会在那里呢？
\n除其他外，这些观察使我意识到，只要涉及嵌套表，HTML 电子邮件开发就会存在大量变化。如此之多以至于很难得出 table、tr 和 td 使用的一般经验法则。但据我所见：
\n任何人都可以验证我的观察结果，或者更好的是，给我一个关于何时在 HTML 电子邮件开发上下文中创建新表、tr 或 td 的更详细解释？
\n提前致谢！
\nPS如果我的观察有任何错误，请纠正我。我真的很想尽我所能去了解这个领域的细微差别。
\n小智 6
今天我们仍然需要在 HTML 电子邮件中使用表格的唯一原因是 \xe2\x80\xa6 Outlook。更具体地说：Windows 上的 Outlook。更具体地说：Windows 上的 Outlook 2007 及更高版本。
\n2007年，微软决定将Outlook\xe2\x80\x99s渲染引擎从Internet Explorer更改为\xe2\x80\xa6 Word。而且Word 不太擅长渲染HTML 和CSS。它不仅只支持 2007 年之前的部分 CSS（因此没有 flexbox、没有border-radius等等），而且它通常在它应该支持的方面做得很差。例如，该padding属性可以工作，但不能在<div>元素上工作。
随着时间的推移，我\xe2\x80\x99仅在以下情况下使用表：
\n<table style="width:600px">）。<td>）。padding、background-color或border样式。回到你的帖子和例子，你对表 1-6 的所有观察对我来说似乎都是正确的。代码看起来真的很臃肿（还有很多不必要的样式）。我的猜测是这来自于这封电子邮件的构建过程。要么它是从需要所有这些表的先前模板手动编码的，并且开发人员没有足够的冒险精神来删除其中任何一个。或者电子邮件可能是电子邮件生成器的输出（它经常添加太多代码，因为他们的目标是使用类似的输出代码覆盖尽可能多的选项）。考虑到文本中的代码（以及所有嵌套的<span><span><u><i><a>），第二个选项对我来说似乎更有可能。
我尝试重新编码您上面复制的示例。这里\xe2\x80\x99是它的样子。
\n<!--[if mso]><table cellpadding="0" cellspacing="0" border="0" style="width:600px;" role="presentation"><tr><td><![endif]-->\n <div style="margin:0 auto; width:100%; max-width:600px;">\n <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%; background:#000;">\n <tr>\n <td style="padding:10px;">\n <p style="margin:0; text-align:center; letter-spacing:2px; color:#fff; font:italic 12px/18px neusanextpro-condensedlight, sans-serif;">\n <a href="https://www.example.com" target="_blank" style="color:#fff; text-decoration:none;">WINTER SALE: 30% OFF.</a> FREE SHIPPING AVAILABLE WITH AN ACCOUNT. <a href="https://www.example.com" target="_blank" style="color:#fff; text-decoration:underline;">LEARN MORE.</a>\n </p>\n </td>\n </tr>\n </table>\n </div>\n <!--[if mso]></td></tr></table><![endif]-->\n只需要两张表。第一个是专门针对 Outlook 内的条件注释。它用于设置容器的宽度。第二个用于background:#000;和padding:10px。
如果您想了解有关 Outlook 和 HTML 电子邮件的更多信息，我写了以下帖子：
\n\n我强烈推荐#emailgeeks Slack及其#email-code频道，里面充满了热情的电子邮件开发人员，互相帮助和学习。
\n