Best Practice for email template modules

Forum|Forum|6 years ago
April 7, 2020
2 replies
3330 views

Hi there.

I've been doing some reading on html email design recently, and there are a few places (and a few examples I've seen) that say not to wrap each element of the email (or module in Marketo speak) in a table, but to wrap the whole email in a table, and just use Table Rows (<TR> and </TR>) to delineate each module.

In attempting to do this, I've come across a bunch of problems with things formatting VERY oddly.

I'm curious as to what other peoples experiences and approaches have been.

in short, do you prefer (grossly simplified of course)

<!-- My modules begins here -->
<table> 
  <tbody>
    <tr>
      <td>
      </td>
    </tr>
  </tbody>
</table>
<!-- My modules ends here -->

or

<!-- My modules begins here -->
<tr>
  <td>
  </td>
</tr>
<!-- My modules ends here -->

If the latter, do you have issues with TRs stacking next to each other instead of forming new rows?

Cheers

Jo

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by JDNelson1

I actually do a combo of BOTH! You know, why not make it even MORE confusing? lol.

Here's just a basic Separator/Diver module (a color div)

<!---Divider--->   
 <tr class="mktoModule" id="divider" mktoName="Divider - 30px" mktoAddByDefault="false">
  <td bgcolor="${background-color}">
  <table width="100%" height="${top-padding30}" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="${background-color}">
   <tr>
    <td bgcolor="${color-grey}">
    </td>
   </tr>
  </table>
  </td>
 </tr>
     <!---Divider END--->

Dave_Roberts

New Participant

Hey Jo,

I've always preferred the <tr> element for my modules and the <table> for my container but haven't run into an issue where the rows stack next to each other. This shouldn't happen if you're using vanilla HTML for the table unless there are some styles that are changing the display properties of the table elements - maybe the <style> tag in the <head> might be a good place to look for rules that target <tr> elements?

I'd be happy to have a look at the code where you're seeing this issue to see if I can re-create/spot the issue here if that'd be helpful. If so, could you provide some context on when you're seeing the rows stack next to each other -- like on Desktop/Tablet/Mobile and which device and Inbox service where you're seeing this issue?

Thanks,

Dave

J

JDNelson1Accepted solution

Community Manager

I actually do a combo of BOTH! You know, why not make it even MORE confusing? lol.

Here's just a basic Separator/Diver module (a color div)

<!---Divider--->   
 <tr class="mktoModule" id="divider" mktoName="Divider - 30px" mktoAddByDefault="false">
  <td bgcolor="${background-color}">
  <table width="100%" height="${top-padding30}" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="${background-color}">
   <tr>
    <td bgcolor="${color-grey}">
    </td>
   </tr>
  </table>
  </td>
 </tr>
     <!---Divider END--->

Jo_Pitts1Author

Community Manager

In my simple examples, I hadn't layered in the nested tables.

What you've shown is exactly what I'm building out.

Cheers and thanks for the advice

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded