Question

我正在构建一个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>

Answer 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>中嵌套表。

Answer 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>

如何在单元格中定位表格

2 个答案: