Nested table question, best practices, please help

Hi there, I am doing a little testing for a campaign and I am wondering what the braintrust has to say about a table layout question. I am wondering if you have multiple vertical layout tables, is it necessary to enclose them in individual TDs, e.g. one table per TD, or is it safe to stack them in a single TD?

I will include simplified sample code below. Theoretically the tables should be safe all stacked vertically in a single TD, but I am wondering if there are elements I am overlooking or rendering engines I may not have tested.

I have run a few of these emails through the test renderer to see if I can intentionally introduce bad spacing and misalignment, but haven't had any problems yet. I know single TDs enclosing each table adds minimal code, but it's a hard sell on some colleagues to introduce the extra level of table embedding.

Thanks in advance for all advice and any tips!

<!-- single td encloses all three content blocks -->
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="200"> 
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="200">BANNER</td>
                </tr>
            </table>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="200">BODY CONTENT</td>
                </tr>
            </table>
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="200">FOOTER</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<!-- content blocks each wrapped in a single td -->
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td width="200"> 
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="200">BANNER</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td width="200">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="200">BODY CONTENT</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td width="200">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td width="200">FOOTER</td>
                </tr>
            </table>
        </td>
    </tr>
</table>
roshodgekiss roshodgekiss, 4 years ago

Hi dvanzandt, welcome to the forums! What you've done above is absolutely fine. Having a 'container' table cell around 3 other tables is no worry at all - in fact, I recommend nesting tables as frequently as possible to take control of layouts.

Note that you can create multi-column layouts by applying align="left" to the tables. The only clients that object to this are Outlook (it adds 5px padding to elements with align="") and Lotus Notes 7 and prior, because they're terrible.

Best of luck, dvanzandt! :D


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
jimmenycricket jimmenycricket, 4 years ago

As Ros has said, your approach is good. However I personally would code in the first style (stacking tables as you put it). There's no wasted code, its cleaner, its easier to see and if you ever need to separate into dynamic sections or amend/swap around certain parts, you will find it much easier to locate the table/section.

Cheers!


Get in touch for any freelance work!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098