你能用 HTML 表模仿 div 的浮动权利吗？

Question

我正在尝试为我的客户创建电子邮件模板。他们正在发送 HTML 时事通讯。我最初的布局很完美，只是发现 Outlook 和其他电子邮件程序（Gmail 等）不支持我需要的定位。时事通讯的整体布局如下：（原谅ASCII艺术）

---------------------------------------------------
| Header Image                      |  Email Title |
|                                   |              |
----------------------------------------------------
| Date                              | Contents     |
----------------------------------------------------
| Main Content                      | TOC          |
|                                   | Related links|
|                                   |              |
|                                   |--------------|
|                                                  |
|                                                  |
----------------------------------------------------
| Footer Info                                      |
|                                                  |
----------------------------------------------------

因为我需要使用 HTML 表格来获得这个定位，所以我无法将内容包装到相关链接下的部分中。

有没有办法使用 HTML 表来模仿 DIV 和 float:right 的概念（我最初实现它的方式）？我现在的输出是内容保留在左侧 "Main Content" 列中，我在 "Related Links" 部分下方的右侧得到一条长长的白色条带。

我尝试了各种 CSS 样式，但似乎无法在 Outlook 或 GMail 中正确呈现。

我一直在考虑让用户输入文本，直到他们到达右侧内容框的末尾，然后开始在另一个条目中输入文本，然后我用 ColSpan 将它们拼接在一起共 2 个。然而，这对我的用户来说似乎过于复杂，而且有点麻烦。

这是相当简单的标记

<table border="0" cellspacing="1" cellpadding="0" style="width:750px;">
  <tr style="height:205px">
    <td style="width:500px;">
      <img/>
    </td>
    <td style="width:250px;">
      <span>Some Title</span>
    </td>
  </tr>
  <tr style="height:22px">
    <td style="width:500px;">NewsLetter Title</td>
    <td style="width:250px;">Contents</td>
  </tr>
  <tr>
    <td style="width:500px;">
      Main content of newsletter
    </td>
    <td style="width:250px;">
      Table of Contents Related Links
    </td>
  </tr>
  <tr>
    <td colspan="2">
      Footer Info
    </td>
  </tr>
</table>

我希望根据需要扩展主要内容区域，一旦内容超出右侧 "Contents" 部分，主要内容将流入该栏。

Answer 1

没有 CSS 你会想做这样的事情：

<table style='border:1px solid #000; border-collapse:collapse;'>
  <thead>
    <tr>
      <th style='width:316px; font-size:0; padding:0; border:1px solid #000;'><img width='316' height='159' src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-c_x9ADUhNWyovPD0yjkNwzEvaHK7INZYTRwfRjLrHwGmNDns1g' /></th>
      <th style='border:1px solid #000; padding:3px;'>Email Title</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan='2' style='padding:3px; border:1px solid #000;'>Footer Info</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td style='padding:3px; border:1px solid #000;'>Date</td>
      <td style='padding:3px; border:1px solid #000;'>Content</td>
    </tr> 
    <tr>
      <td colspan='2' style='padding:3px; border:1px solid #000;'>
        <table style='width:calc(100% - 316px); padding:3px; background:#000; color:#fff; float:right;'>
          <tbody>
            <tr>
              <td>TOC</td>
            </tr>
            <tr>
              <td>Related Links</td>
            </tr>
          </tbody>
        </table>
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
        Main Content Main Content Main Content Main Content
      </td>
    </tr>
  </tbody>
</table>

当然，如果可能的话，你想使用CSS。

Answer 2

首先，应该指出这不是电子邮件客户端的自然行为。
你会在某个地方看到问题，因为你正在有效地拼凑出一个解决方案。下面有更多详细信息...

要考虑的要点：

正如我对之前的一些答案所评论的那样 - Divs 可以模仿您想要的内容，但在 Outlook 中，divs 会膨胀到 100%。诸如计算宽度等修复不是解决此问题的解决方案。表格绝对会完成完全相同的工作，而没有必须添加黑客修复程序的缺点，例如仅针对 Outlook 的 Ghost tables。
尽量不要在电子邮件中使用浮动。它们可能在某些地方起作用，但不会在所有地方起作用。 align 属性（例如 align="right"）就是您要找的。最好在 table 单元格上定义这些，里面的内容将继承这个属性，但是当在单元格内处理多个 table 时，最好直接在元素上定义.
您可以在我下面的代码中看到这一点...我的 table 位于一组文本旁边。在单元格上定义对齐方式会强制文本右对齐，不太好！
因为这不是自然行为，所以您会在某处看到问题。
对于下面的代码，这消除了对浮动、div 和计算宽度的依赖，并使用 tables 和固定宽度，尽管这些可以更改为百分比。
但是，这组文本混淆了 Outlook 中 table 单元格的 colspan 和宽度。具体来说，它在整个 table 中炸掉了第一个单元格，因此它没有遵守您定义的 316px 的固定值。

*仅供参考 - 我使用 Litmus 帐户在大型电子邮件客户端中测试此代码，包括 Gmail 网络邮件、Gmail 应用程序 (iOS)、Outlook 2010/ 2013/2019，Outlook 网络邮件、Outlook 365、Yahoo Webmail、Outlook App (iOS) 和 Apple Mail App (iOS)。

<table border="0" cellspacing="0" cellpadding="0" style="border:1px solid #000; border-collapse:collapse; width:100%;">
    <tr>
      <td style="width:316px; font-size:0; padding:0; border:1px solid #000;"><img width="316" height="159" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-c_x9ADUhNWyovPD0yjkNwzEvaHK7INZYTRwfRjLrHwGmNDns1g" style="display:block;" /></td>
      <td style="border:1px solid #000; padding:3px;">Email Title</td>
    </tr>
      
    <tr>
      <td style="padding:3px; border:1px solid #000;">Date</td>
      <td style="padding:3px; border:1px solid #000;">Content</td>
    </tr>
    
    <tr>
      <td colspan="2" style="padding:3px; border:1px solid #000;">
          
        <table align="right" border="0" cellspacing="0" cellpadding="0" style="width:272px;">
            <tr>
                <td style="padding:3px; background:#000; color:#fff;">
                    <table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
                        <tr>
                            <td>
                              TOC
                            </td>
                        </tr>
                        <tr>
                            <td>
                              Related Links
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
          
        Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content Main Content
      </td>
    </tr>
      
    <tr>
      <th colspan="2" style="padding:3px; border:1px solid #000;">Footer Info</th>
    </tr>
</table>

你能用 HTML 表模仿 div 的浮动权利吗？

Can you mimic the float right of a div with HTML Tables?

html

css

outlook

html-table

html-email