0

I am building an html email template.. This has nested tables to control layout..

What I am trying today is position 2 tables within a cell , one contains header content and needs to stay at the top of the cell and the other table is the footer which needs to stay at the bottom of the cell no matter the height.. Content will be in the middle.

Its been so long since I've worked with tables I'm not able to get these to position the way I need them to.. Any help would be GREATLY appreciated!

<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>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Dennis
  • 1,145
  • 4
  • 20
  • 35
  • I don't think your table elements are nested properly. You have a `tr` as a child of `td`. – skube Dec 11 '13 at 15:29
  • @skube they are. The code just needed some proper formatting. – matewka Dec 11 '13 at 15:34
  • doesnt this automatically happen whenever you add a 3rd table in between the header and the footer, and put your content in there? I'm probably missing something :S – Viridis Dec 11 '13 at 15:41
  • Hmm, is it even possible to achieve what you want in your current scheme? You would have to 'valign=top' and 'valign=bottom' in 1 single table-data. Considering it's a template for an email, i assume CSS is not an option. I'm sure that you can easily achieve what you if you re-structure your entire large table. – Viridis Dec 11 '13 at 15:55

2 Answers2

3

If you want something multi-column this might help.

But based on what you are asking (the basic concept - not your code), it seems like you just need something like this:

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

By putting the header and footer in separate rows, they will stick to the top/bottom. If you need multiple columns, just add additional cells to each row. Alternatively, you could nest tables within each <td>.

Community
  • 1
  • 1
John
  • 11,985
  • 3
  • 45
  • 60
1

How about using thead and tfoot. Something like:

<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>
skube
  • 5,867
  • 9
  • 53
  • 77
  • can't used thead and tfoot as this places the head & footer directly on top and under the content of tbody.. I need the entire footer table to be "anchored" to the bottom of the cell its in regardless of cell height.. – Dennis Dec 11 '13 at 16:12
  • 1
    @Dennis you can't anchor it as CSS `position` is not widely supported in html-email. The only way to keep it inside the same cell and always at the bottom (assuming the content is not long enough) is to set the height on the nested table. You are better off putting it in its own table row, setting the height on the row in thbe center and then having your content table within. See my answer for an example. – John Dec 11 '13 at 20:06