Table with Multiple Columns as a Repeater?

I'm running into a problem where I'm trying to create a table with 3 horizontal columns that is repeatable where the user can edit the content in there. How would I create this code with a repeater tag.

<table align="center" cellpadding="0" cellspacing="0" width="540">
            <tr>
               
                <td valign="top" width="166">
               
                    <h3><span> Title 1 </span></h3>
                    <p>
                        Content goes here
                    </p>
                   
                </td>
                <td width="20">&nbsp;</td><td valign="top" width="166">
               
                    <h3><span> Title 2 </span></h3>
                    <p>
                        Content goes here
                    </p>
                   
                </td>
                <td width="20">&nbsp;</td><td valign="top" width="166">
               
                    <h3><span> Title 3 </span></h3>
                    <p>
                        Content goes here
                    </p>
                   
                </td>
               
            </tr>
        </table>

NickoLabs NickoLabs, 5 years ago

My guess would be:

<table align="center" cellpadding="0" cellspacing="0" width="540">
    <tr>
        <repeater>
            <td valign="top" width="166"><h3><span>
                    <$title default='Enter Title Here'$>
                    </span></h3>
                <$description default='<p> Content goes here </p>'$></td>
            <td width="20">&nbsp;</td>
        </repeater>
    </tr>
</table>

I don't know how well this would be supported (never tried horizontal repeater, only vertical).
But you see, using this solution, you will be facing an extra 20 pixels margin on the right for the last column.
And nothing would stop the client (if it's a template) from adding a fourth items, kinda crashing the whole table... Sadly, DIV with Float options aren't recommended in an HTML email (not pretty well supported).


I would rather recommend make those three columns editable, but NOT draggable/repeatable.

<table align="center" cellpadding="0" cellspacing="0" width="540">
    <tr>
        <td valign="top" width="166"><h3><span>
                <$title default='Enter Title Here'$>
                </span></h3>
            <$description default='<p> Content goes here </p>'$></td>
        <td width="21">&nbsp;</td>
        <td valign="top" width="166"><h3><span>
                <$title default='Enter Title Here'$>
                </span></h3>
            <$description default='<p> Content goes here </p>'$></td>
        <td width="21">&nbsp;</td>
        <td valign="top" width="166"><h3><span>
                <$title default='Enter Title Here'$>
                </span></h3>
            <$description default='<p> Content goes here </p>'$></td>
    </tr>
</table>

Notice that 166*3 + 20*2 = 538. I added 2 pixels to the separator colums.
I would also suggest placing a "spacer img" into those empty columns.

Hope that helps!


Nickolas Simard
Multimedia integrator: Strategy & Web development
WebsiteTwitterFacebookLinkedIn
tbianco tbianco, 5 years ago

That does help, but it doesn't give it the ability to repeat those columns. I miss the template tags in MailChimp, but I love the simplicity of Campaign Monitor.

If we just paste in html will they be able to edit it or ONLY if it has the <$description> tag in there?


Tony Bianco
Veloce Media
Media & Marketing Solutions for Developing Businesses
http://VeloceMedia.com
NickoLabs NickoLabs, 5 years ago
tbianco :

That does help, but it doesn't give it the ability to repeat those columns. I miss the template tags in MailChimp, but I love the simplicity of Campaign Monitor.

You could always make the whole <tr></tr> repeatable, so that if you need a fourth items, you could add another row... While deleting the content of the last two columns...

tbianco :

If we just paste in html will they be able to edit it or ONLY if it has the <$description> tag in there?

The client will only have access the editing the Template Tags <$title$> and <$description$>. You could also add a <$image$> tag if you like. That makes the layout safer to client editing.

If you want to know more about Template Tags, I suggest http://help.campaignmonitor.com/topic.aspx?t=129

Edit: Darn "dot" at the URL's end! :D


Nickolas Simard
Multimedia integrator: Strategy & Web development
WebsiteTwitterFacebookLinkedIn
BThies BThies, 5 years ago

Is this what you're looking for?
http://www.campaignmonitor.com/forums/viewtopic.php?id=3556


Brian Thies
Professional Email Developer
Thies Publishing
NickoLabs NickoLabs, 5 years ago

Hey nice work around Brian!

From what I understand from the code, you would have the ability to modify the content of the three columns individually as well as dragging content of the same column.


Nickolas Simard
Multimedia integrator: Strategy & Web development
WebsiteTwitterFacebookLinkedIn

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