如何在单元格中放置表格答案

【问题标题】：How to position tables within a cell如何在单元格中放置表格
【发布时间】：2017-06-27 01:42:44
【问题描述】：

我正在构建一个 html 电子邮件模板..这有嵌套表格来控制布局..

我今天尝试的是在一个单元格中放置 2 个表格，一个包含标题内容，需要留在单元格的顶部，另一个表格是页脚，需要留在单元格的底部，无论高度.. 内容将在中间。

自从我使用表格以来已经很长时间了，我无法让它们按照我需要的方式定位。任何帮助将不胜感激！

<table width="600" border="0">
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td width="150" rowspan="5">
            <table width="150" border="0" align="center">
                <tr>
                    <td bgcolor="#00FFFF">Header</td>
                </tr>
                <tr>
                    <td bgcolor="#01FFFF">must anchor</td>
                </tr>
                <tr>
                    <td bgcolor="#01FFFF">at top</td>
                </tr>
            </table>
            <table width="150" border="0" align="center">
                <tr>
                    <td bgcolor="#CCFF99">Footer</td>
                </tr>
                <tr>
                    <td bgcolor="#CCFF99">must anchor</td>
                </tr>
                <tr>
                    <td bgcolor="#CCFF99">at bottom</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td colspan="2">
            <p>dededwewdewdewd</p>
            <p>ewdewdewdewdewd</p>
            <p>wedewdewdewd</p>
            <p>ewdewdwed</p>
            <p>&nbsp;</p>
        </td>
    </tr>
    <tr>
        <td colspan="2">&nbsp;</td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

【问题讨论】：

我认为您的表格元素嵌套不正确。你有一个tr 作为td 的孩子。
@skube 他们是。代码只需要一些适当的格式。
当您在页眉和页脚之间添加第三个表格并将您的内容放在那里时，这不会自动发生吗？我可能错过了一些东西：S
嗯，在您当前的方案中甚至有可能实现您想要的吗？您必须在 1 个单一表格数据中使用 'valign=top' 和 'valign=bottom'。考虑到它是电子邮件的模板，我认为 CSS 不是一个选项。我敢肯定，如果您重新构建整个大表，您可以轻松实现自己的目标。

标签： html html-table html-email

【解决方案1】：

如果你想要多列的东西this might help。

但根据您的要求（基本概念 - 不是您的代码），您似乎只需要这样的东西：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#252525" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #FFFFFF; padding:10px;">
      Header
    </td>
  </tr>
  <tr>
    <td valign="top">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000; padding:10px;">
            Nest your content here...<br>...<br>...<br>...<br>...
          </td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td bgcolor="#252525" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #FFFFFF; padding:10px;">
      Footer
    </td>
  </tr>
</table>

通过将页眉和页脚放在不同的行中，它们将固定在顶部/底部。如果您需要多列，只需在每一行中添加额外的单元格。或者，您可以在每个 <td> 中嵌套表格。

【讨论】：

【解决方案2】：

如何使用thead 和tfoot。比如：

<table>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Sum</td>
            <td>$180</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
        </tr>
    </tbody>
</table>

【讨论】：

不能使用 thead 和 tfoot，因为这会将页眉和页脚直接放在 tbody 内容的顶部和下方。我需要将整个页脚表“锚定”到单元格的底部无论单元格高度如何，它都在..
@Dennis 你不能锚定它，因为 CSS position 在 html-email 中没有得到广泛支持。将其保持在同一个单元格内并始终位于底部（假设内容不够长）的唯一方法是设置嵌套表的高度。你最好把它放在它自己的表格行中，在中间的行上设置高度，然后将你的内容表放在里面。例如，请参阅我的答案。