【发布时间】：2022-02-10 15:34:41
【问题描述】：
我对 HTML 电子邮件开发相对较新，我正试图围绕嵌套表格，特别是何时嵌套表格、创建 tr 标记对或添加 td 标记对。 下面是来自位于此 URL 的 HTML 电子邮件的真实示例的代码 sn-p，以说明我的困惑的基础：https://reallygoodemails.com/emails/save-30-for-our-winter-sale/live
<body style="margin:0; padding:0; min-width:100%; background-color:transparent;">
<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>
<div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌</div>
<table width="100%" class="body" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td style="background-color:transparent;">
<table width="100%" class="Wrapper" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<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;">
<!--[if(gte mso 9)|(IE)]><table width="600" cellpadding="0" cellspacing="0" border="0" style="width: 600px;" role="presentation"> <tr> <td align="center"><![endif]-->
<table width="100%" class="Container" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;" role="presentation">
<tr>
<td align="center" style="background-color:#000000">
<table width="100%" class="Column-1 " cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr>
<td align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0" role="presentation">
<tr class="text">
<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">
<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=
"_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=
"" 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>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>这里有 6 个表，虽然我了解表 1 和表 6 的作用，但其他四个表令人困惑。
-
表 2 看起来像是定义了页面的包装器。但是表 1 不是已经这样做了吗？如果有，为什么会在那里？
-
表 3 和表 4 看起来都充当 HTML 电子邮件模板的主要容器，因为它们都定义了主表的宽度。但是我不明白为什么在表4指定相同宽度的600px的情况下还需要表3？
-
表 5 有一个类“Column-1”，但在文档头部的样式表中没有一个标记为“Column-1”的类，那为什么会有呢？
除其他外，这些观察让我意识到，无论何时涉及嵌套表，HTML 电子邮件开发中都会存在大量变化。如此之多，以至于很难得出 table、tr 和 td 使用的一般经验法则。但据我所见：
- 表格用于将页面切割成块并指定这些块的大小。
- Tr 标记对用于定义 HTML 电子邮件模板中的单独部分。
- Td 标记对用于内容放置（在子表中）或内容格式化（在父表中）。
谁能验证我的观察，或者更好的是，给我一个更详细的解释，说明何时在 HTML 电子邮件开发的上下文中创建新表、tr 或 td？
提前致谢！
附：如果我的任何观察有误，请纠正我。我真的很想尽我所能了解这个领域的细微差别。
【问题讨论】：
标签： html html-table html-email