Re: Best Practice for email template modules

Jo_Pitts1 · ‎04-06-2020

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

JD_Nelson · ‎04-07-2020

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

View solution in original post

JD_Nelson · ‎04-07-2020

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_Pitts1 · ‎04-23-2020

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

Dave_Roberts · ‎04-08-2020

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