Horizonal lines in tables

I am creating an e-mail template for some real estate listings.  The template should look like this: https://docs.google.com/open?id=0BwtN5bjAnIGdY1JrakdwV3hmV0k


Here is what I have so far in campaign monitor: https://docs.google.com/open?id=0BwtN5bjAnIGda18wMkJ4SHBhdTA

I want to try to figure out how to get that horizontal line below each property.  Is this possible?

I tried adding a repeatable image to the bottom of the table, but the image just keeps getting pushed down when I add new content from above.

Thanks
Rachel

rmcfadden, 4 years ago

Oh yeah and something I forgot to mention is that the mock up shows two properties but this template is supposed to handle as many properties as the company has available.

essexboyracerhome, 4 years ago

Without seeing your HTML code its hard to tell, but within your repeater add an <hr> after the table structure or another table with a 1px high gif?

rmcfadden, 4 years ago

I tried that, it didn't work when I put it within the repeater tag.  It didn't appear at all when I loaded it in campaign monitor.

If its after the table structure it won't repeat.  Also it just gets pushed down below the content like I mentioned.

Here is my original code:

</head><body><table width="100%" cellpadding="0" cellspacing="0" border="0" id="background-table">
<tbody><tr>
        <td align="center" bgcolor="#ffffff">
<table class="w640" style="margin:0 10px;" width="640" cellpadding="0" cellspacing="0" border="0">
                <tbody><tr><td class="w640" width="640" height="2"></td></tr>
                
                <tr>
                    <td class="w640" width="873">
                      <table id="top-bar" class="w640" width="640" cellpadding="0" cellspacing="0" border="0" bgcolor="#00707b">
    <tbody><tr>
        <td width="15" height="56" class="w15"></td>
        <td width="350" align="left" valign="middle" bgcolor="#FFFFFF" class="w325"></td>
        <td class="w30" width="30"></td>
        <td class="w255" width="255" valign="middle" align="right"><table cellpadding="0" cellspacing="0" border="0">
          <tbody><tr>
            
            
            
            </tr>
  </tbody></table>
          <table width="267" border="0" align="right" cellpadding="0" cellspacing="0" class="w255">
            <tbody><tr>
              <td class="w255" width="268" height="10"><div class="article-content1">
                <webversion>
                  <p>View in Browser</p>
                  </webversion>
                </div></td></tr>
              </tbody></table>
        </td>
        </tr>
</tbody></table>
                        
                    </td>
                </tr>
                <tr>
                <td id="header" class="w640" width="873" align="center" bgcolor="">
    
    <div align="center" style="text-align: center"><img src="../../../Documents/Unnamed Site 3/mdheader.jpg" width="640" height="132" alt="Thornhill Properties Inc." /></div><table width="640" height="50" border="0" align="center" cellpadding="10" cellspacing="0" class="promotable">
          <tr>
            <td bgcolor="#073021" class="promocell">                      
             
                <singleline label="Property Title">
                  <h1 class="header-content">Property Type (Retail/Residential/Office/Etc.)</h1> 
                </singleline>
            
            </td>
        </tr>
        </table>
    
    
</td>
                </tr>
                
                <tr id="twocolumn-content-row">
                  <td class="w640" width="873"><table width="637" height="184" border="0" cellpadding="0" cellspacing="0" class="w640">
    <tbody>
      <tr>
        <td width="1" height="164" bgcolor="#ffffff" class="w15"></td>
        <td id="left-sidebar" class="w140" width="4" bgcolor="#ffffff" valign="top" align="left"></td>
        <td id="left-sidebar" class="w140" width="200" bgcolor="#FFFFFF" valign="top" align="left">
            
            
            
          <repeater><layout label="Text with full-width image">
                       <table class="w580" width="20" cellpadding="0" cellspacing="0" border="0">
                           <tbody><tr>
                               <td class="w580" width="580">
                                   <p align="left" class="article-title">
                                     <span class="article-title">
                                     <singleline label="Title" class="article-title">Add a title</singleline>
                                    </span></p>
                               </td>
                           </tr>
                           <tr>
                               <td class="w580" width="580"><img alt="Property Image" width="200
                               " border="0" class="w580" editable="true" label="Image"></td>
                           </tr>
                           <tr><td class="w580" width="580" height="15"></td></tr>
                           <tr>
                               <td class="w580" width="580"></td>
                           </tr>
                           <tr><td class="w580" width="580" height="10"></td></tr>
                       </tbody></table>
                   </layout></repeater></td>
        <td id="left-sidebar" class="w140" width="250" bgcolor="#ffffff" valign="top" align="left"><repeater><layout label="Text with description"><table width="230" border="0" align="center" cellpadding="0" cellspacing="0" class="w410">
          <tbody>
            <tr>
              <td class="w410"></td>
              </tr>
            <tr>
              <td class="w410" width="376"><div align="left" class="article-content">
                <multiline label="Description">Enter your description</multiline>
                </div></td>
              </tr>
            <tr>
              <td class="w410" width="376" height="10"></td>
              </tr>
            </tbody>
          </table> </layout>
          <layout label="Text with left-aligned image">
                       <table class="w580" width="246" cellpadding="0" cellspacing="0" border="0">
                           <tbody><tr>
                               <td class="w580" width="246">
                                  
                                  <table width="42" border="0" align="left" cellpadding="0" cellspacing="0">
                                     <tbody><tr>
                                           <td width="300"><img alt="Download" width="36" border="0" class="w300" editable="true" label="Image"></td>
                                           <td class="w30" width="1"></td>
                                       </tr>
                                       <tr><td></td><td class="w30" width="1" height="5"></td></tr>
                                   </tbody></table>
                                   <div align="left" class="article-content1"><singleline>DOWNLOAD FLYER</singleline></div>
                               </td>
                           </tr>
                           <tr><td class="w580" width="246" height="10"></td></tr>
                       </tbody></table>
                   </layout>
                   <layout label="image"><table width="220" border="0" align="center" cellpadding="0" cellspacing="0" class="w180">
            <tbody>
              <tr>
                <td class="w180" width="180"><img alt="View Costar" width="220" border="0" class="w180" editable="true" label="Image" /></td>
                </tr>
              <tr>
                <td class="w180" width="180" height="10"></td>
                </tr>
              <tr></tr>
              <tr>
                <td class="w180" width="180" height="10"></td>
                </tr>
              </tbody>
    </table></layout></repeater></td>
        
        
        <td width="171" valign="top" bgcolor="#ffffff" class="w470"><table class="w470" width="" cellpadding="0" cellspacing="0" border="0">
          <tbody>
            <tr>
              <td class="w410" width="166"></td>
            </tr>
          </tbody>
        </table>
          <table width="166"  border="0" align="center" cellpadding="0" cellspacing="0" class="w470">
            <tbody>
              <tr>
                <td class="w410" width="166"><table class="w410" width="166" cellpadding="0" cellspacing="0" border="0">
                  <tbody>
                    <tr>
                      <td class="w195" width="166" valign="top"></td>
                    </tr>
                  </tbody>
                </table>
                 </td>
              </tr>
              <tr>
                <td class="w410"><repeater><layout label="right aligned image with text"><table width="167" align="center" cellpadding="0" cellspacing="0" class="w580">
                  <tbody>
                    <tr>
                      <td class="w580" width="167"><p align="left" class="article-title1">
                        <singleline label="Title">Broker Name</singleline>
                      </p>
                        <table cellpadding="0" cellspacing="0" border="0" align="right">
                          <tbody>
                            <tr>
                              <td class="w30" width="15"></td>
                              <td><img alt="Property Broker" width="75" border="0" class="w300" editable="true" label="Image" /></td>
                            </tr>
                            <tr>
                              <td class="w30" width="15" height="5"></td>
                              <td></td>
                            </tr>
                          </tbody>
                        </table>
                        <div align="left" class="article-content1">
                          <multiline label="Description">Enter your description</multiline>
                        </div></td>
                    </tr>
                    <tr>
                      <td class="w580" width="167" height="10"></td>
                    </tr>
                  </tbody>
                </table></layout>
                  </repeater>
                
              </tr>
            </tbody>
          </table>
          <p></p></td>
        <td width="1" valign="top" bgcolor="#ffffff" class="w470"></td>
    </tr>
      <tr>
        <td height="20" bgcolor="#ffffff" class="w15"></td>
        <td id="left-sidebar4" class="w140" bgcolor="#ffffff" valign="top" align="left"></td>
        <td colspan="4" align="left" valign="top" bgcolor="#FFFFFF" class="w140" id="left-sidebar4"><table width="616" height="19" border="0" align="center" cellpadding="0" cellspacing="0" class="w180">
          <tbody>
            <tr>
              <td width="585" height="19" class="w180"><hr /></td>
              </tr>
            </tbody>
          </table></td>
        
        </tr>
    </tbody>
                  </table>
                    <table width="637" height="184" border="0" cellpadding="0" cellspacing="0" class="w640">
                      <tbody>
                        <tr>
                          <td width="1" height="164" bgcolor="#e2e2e2" class="w15"></td>
                          <td id="left-sidebar5" class="w140" width="4" bgcolor="#ffffff" valign="top" align="left"></td>
                          <td id="left-sidebar5" class="w140" width="200" bgcolor="#FFFFFF" valign="top" align="left"></layout>
                            </repeater>
                            <repeater>
                              <layout label="Text with full-width image">
                                <table class="w580" width="20" cellpadding="0" cellspacing="0" border="0">
                                  <tbody>
                                    <tr>
                                      <td class="w580" width="580"><p align="left" class="article-title">
                                        <singleline label="Title" class="article-title">Add a title</singleline>
                                      </p></td>
                                    </tr>
                                    <tr>
                                      <td class="w580" width="580"><img alt="Property Image" width="200
                               " border="0" class="w580" editable="true" label="Image" /></td>
                                    </tr>
                                    <tr>
                                      <td class="w580" width="580" height="15"></td>
                                    </tr>
                                    <tr>
                                      <td class="w580" width="580"></td>
                                    </tr>
                                    <tr>
                                      <td class="w580" width="580" height="10"></td>
                                    </tr>
                                  </tbody>
                                </table>
                              </layout>
                            </repeater></td>
                          <td id="left-sidebar5" class="w140" width="250" bgcolor="#ffffff" valign="top" align="left"><repeater>
                            <layout label="Text with description">
                              <table width="230" border="0" align="center" cellpadding="0" cellspacing="0" class="w410">
                                <tbody>
                                  <tr>
                                    <td class="w410"></td>
                                  </tr>
                                  <tr>
                                    <td class="w410" width="376"><div align="left" class="article-content">
                                      <multiline label="Description">Enter your description</multiline>
                                    </div></td>
                                  </tr>
                                  <tr>
                                    <td class="w410" width="376" height="10"></td>
                                  </tr>
                                </tbody>
                              </table>
                            </layout>
                            <layout label="Text with left-aligned image">
                              <table class="w580" width="246" cellpadding="0" cellspacing="0" border="0">
                                <tbody>
                                  <tr>
                                    <td class="w580" width="246"><table width="42" border="0" align="left" cellpadding="0" cellspacing="0">
                                      <tbody>
                                        <tr>
                                          <td width="300"><img alt="Download" width="36" border="0" class="w300" editable="true" label="Image" /></td>
                                          <td class="w30" width="1"></td>
                                        </tr>
                                        <tr>
                                          <td></td>
                                          <td class="w30" width="1" height="5"></td>
                                        </tr>
                                      </tbody>
                                    </table>
                                      <div align="left" class="article-content1">
                                        <singleline>DOWNLOAD FLYER</singleline>
                                      </div></td>
                                  </tr>
                                  <tr>
                                    <td class="w580" width="246" height="10"></td>
                                  </tr>
                                </tbody>
                              </table>
                            </layout>
                            <layout label="image">
                              <table width="220" border="0" align="center" cellpadding="0" cellspacing="0" class="w180">
                                <tbody>
                                  <tr>
                                    <td class="w180" width="180"><img alt="View Costar" width="220" border="0" class="w180" editable="true" label="Image" /></td>
                                  </tr>
                                  <tr>
                                    <td class="w180" width="180" height="10"></td>
                                  </tr>
                                  <tr></tr>
                                  <tr>
                                    <td class="w180" width="180" height="10"></td>
                                  </tr>
                                </tbody>
                              </table>
                            </layout>
                          </repeater></td>
                          <td width="13" valign="top" bgcolor="#ffffff" class="w470"></td>
                          <td width="171" valign="top" bgcolor="#ffffff" class="w470"><table class="w470" width="" cellpadding="0" cellspacing="0" border="0">
                            <tbody>
                              <tr>
                                <td class="w410" width="166"></td>
                              </tr>
                            </tbody>
                          </table>
                            <table class="w470" width="166" cellpadding="0" cellspacing="0" border="0">
                              <tbody>
                                <tr>
                                  <td class="w410" width="166"><table class="w410" width="166" cellpadding="0" cellspacing="0" border="0">
                                    <tbody>
                                      <tr>
                                        <td class="w195" width="166" valign="top"></td>
                                      </tr>
                                    </tbody>
                                  </table></td>
                                </tr>
                                <tr>
                                  <td class="w410"><repeater>
                                    <layout label="right aligned image with text">
                                      <table width="167" align="center" cellpadding="0" cellspacing="0" class="w580">
                                        <tbody>
                                          <tr>
                                            <td class="w580" width="167"><p align="left" class="article-title1">
                                              <singleline label="Title">Broker Name</singleline>
                                            </p>
                                              <table cellpadding="0" cellspacing="0" border="0" align="right">
                                                <tbody>
                                                  <tr>
                                                    <td class="w30" width="15"></td>
                                                    <td><img alt="Property Broker" width="75" border="0" class="w300" editable="true" label="Image" /></td>
                                                  </tr>
                                                  <tr>
                                                    <td class="w30" width="15" height="5"></td>
                                                    <td></td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                              <div align="left" class="article-content1">
                                                <multiline label="Description">Enter your description</multiline>
                                              </div></td>
                                          </tr>
                                          <tr>
                                            <td class="w580" width="167" height="10"></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                    </layout>
                                  </repeater></td>
                                </tr>
                              </tbody>
                            </table>
                            <p></p></td>
                          <td width="1" valign="top" bgcolor="#ffffff" class="w470"></td>
                        </tr>
                        <tr>
                          <td height="20" bgcolor="#e2e2e2" class="w15"></td>
                          <td id="left-sidebar6" class="w140" bgcolor="#ffffff" valign="top" align="left"></td>
                          <td colspan="4" align="left" valign="top" bgcolor="#FFFFFF" class="w140" id="left-sidebar6"><table width="616" height="19" border="0" align="center" cellpadding="0" cellspacing="0" class="w180">
                            <tbody>
                              <tr>
                                <td width="585" height="19" class="w180"><hr></td>
                              </tr>
                            </tbody>
                          </table></td>
                          <td valign="top" bgcolor="#ffffff" class="w470"></td>
                        </tr>
                      </tbody>
                  </table></td></tr>
                <tr>
                  <td class="w640"><table class="w640" width="640" cellpadding="0" cellspacing="0" border="0">
                    <tbody>
            <tr>
              <td class="w15" width="1" bgcolor="#ffffff"></td>
              <td id="left-sidebar2" class="w140" width="3" bgcolor="#ffffff" valign="top" align="left"></td>
              <td id="left-sidebar2" class="w140" width="220" bgcolor="#FFFFFF" valign="top" align="left">
               
                <table class="w470" width="214" cellpadding="0" cellspacing="0" border="0">
                  <tbody>
                    </tbody>
                  <tbody>
                    <tr>
                      <td class="w140" width="14" height="10"></td>
                      </tr>
                    <tr>
                      <td class="w470" width="14"></td>
                      <td width="200" height="10" class="w470"><p class="Text">
                        <forwardtoafriend> <img src="../../../Documents/Unnamed Site 3/forwardemail.jpg" width="185" height="44" alt="Forward this Email" /></forwardtoafriend>
                        </p>
                        <p class="Text"> <a href="http://thornhillproperties.net/?page_id=59"><img src="../../../Documents/Unnamed Site 3/viewlistings.jpg" width="185" height="44" alt="View More Listings" /></a></p>
                        <table width="200" border="0">
                          <tr>
                            <td><span class="Text">Sign Up for our Newsletter</span></td>
                            </tr>
                          <tr>
                            <td><form action="http://drio.createsend.com/t/j/s/gtluh/" method="post" id="subForm">
                              <div>
                                <input name="cm-gtluh-gtluh" type="text" id="gtluh-gtluh4" value="Your email address..." style="margin-top: 0px; margin-left: 0px; margin-right: 0px;
width:160px;" />
                                <span class="button">
                                  <input type="image" style="position: absolute; " value="Subscribe" src="../../../Documents/Unnamed Site 3/arrow.jpg" alt="subscribe" width="30" border="0"/>
                                  </span></div>
                              </form></td>
                            </tr>
                          </table></td>
                      <td width="1" class="w470"></td>
                      </tr>
                    </tbody>
                  </table>
                </repeater></td>
              <td width="409" valign="top" bgcolor="#ffffff" class="w470">
                <table class="w410" width="406" cellpadding="0" cellspacing="0" border="0">
                <tbody>
                  <tr>
                    <td class="w410"></td>
                    </tr>
                  <tr>
                    <td class="w410" width="375"><div align="left" class="article-content">
                      <multiline label="Description" class="article-content1">Enter your description</multiline>
                      </div></td>
                    </tr>
                  <tr>
                    <td class="w410" width="375" height="10"></td>
                    </tr>
                  </tbody>
                </table>
                <table border="0" align="right" cellpadding="3" cellspacing="0">
                  <tr>
                    <td><a href="http://www.facebook.com/ThornhillPropertiesInc"><img border="0" src="../../../Documents/Unnamed Site 3/facebook.jpg" width="27" height="25" alt="Visit us on Facebook" /></a></td>
                    <td>Like Us</td>
                    <td></td>
                    </tr>
                  </table></td>
              <td width="4" valign="top" bgcolor="#ffffff" class="w470"></td>
              </tr>
            <tr>
              <td class="w15" bgcolor="#ffffff"></td>
              <td id="left-sidebar3" class="w140" bgcolor="#ffffff" valign="top" align="left"></td>
              <td id="left-sidebar3" class="w140" bgcolor="#FFFFFF" valign="top" align="left"></td>
              <td valign="top" bgcolor="#ffffff" class="w470">&nbsp;</td>
              <td valign="top" bgcolor="#ffffff" class="w470"></td>
              </tr>
            </tbody>
          </table></td>
                </tr>
                <tr>
                    <td class="w640" width="873"></td>
                </tr>
                
                <tr>
                <td class="w640" width="873">
    <table id="footer" class="w640" width="640" height="85" cellpadding="0" cellspacing="0" border="0" bgcolor="#073021">
    <tbody>
      <tr>
        <td class="w30"></td>
        <td height="16" valign="bottom" class="w580 h0"></td>
        <td valign="top" class="w0"></td>
        <td class="w0"></td>
        <td class="w30"></td>
      </tr>
      <tr><td class="w30" width="19"></td>
      <td width="221" height="31" valign="middle" class="w580 h0"> THORNHILL PROPERITES</td><td width="202" valign="top" class="w0"><p>6301 N. CHARLES STREET, SUITE 2 410-296-2877 | FAX 410-372-0727|</p></td>
      <td width="197" valign="top" class="w0"><p>| BALTIMORE, MARYLAND 21212 <a href="http://www.thornhillproperties.net" title="www.thornhillproperties.net">www.thornhillproperties.net</a></p></td><td class="w30" width="1"></td></tr>
        <tr>
          <td class="w30" width="19"></td>
          <td width="221" class="article-content"><preferences><span class="footer-content-left">Edit your subscription |</span></preferences>
            <span class="footer-content-left">
            <unsubscribe>Unsubscribe</unsubscribe>
            </span>
            </td>
          <td width="202" valign="top" class="hide w0"></td>
          <td class="hide w0" width="197" valign="top">
            <p id="street-address" align="right" class="footer-content-right"></p>
            </td>
          <td class="w30" width="1"></td>
        </tr>
        </tbody></table>
</td>
                </tr>
                <tr><td class="w640" width="873" height="2"></td></tr>
            </tbody></table>
        </td>
    </tr>
</tbody></table></body></html>
roshodgekiss roshodgekiss, 4 years ago

Hi rmcfadden, first up, the widths are a bit all over the shop in this layout - without seeing the media queries, things might get a little hairy when you view the email on a mobile device. Another pointer is that you can have multiple layouts per <repeater>, so it may be worth simplifying your code a bit.

I did a light cleanup to the property listings above, which should help you achieve the layout you're after:

<repeater>
  <layout label="Real Estate Listing">
    <table width="580" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><table width="195" align="left" border="0" cellspacing="0" cellpadding="0" class="w180">
            <tr>
              <td><span class="article-title">
                <singleline label="Title">Property title</singleline>
                </span> <img alt="Property Image" width="180" border="0" class="w180" editable="true" label="Image">
              <td width="15" class="w15"></td>
            </tr>
          </table>
          <table width="195" align="left" border="0" cellspacing="0" cellpadding="0" class="w180">
            <tr>
              <td><multiline label="Description">Enter your description</multiline>
                <table width="180" border="0" cellspacing="0" cellpadding="0" class="w180">
                  <tr>
                    <td><img alt="Download" width="36" border="0" class="w300" editable="true" label="Image" align="left" /></td>
                    <td><singleline>DOWNLOAD FLYER</singleline></td>
                  </tr>
                </table>
              <td width="15" class="w15"></td>
            </tr>
          </table>
          <table width="195" align="left" border="0" cellspacing="0" cellpadding="0" class="w180">
            <tr>
              <td><span class="article-title">
                <singleline label="Title">Broker Name</singleline>
                </span><table width="180" border="0" cellspacing="0" cellpadding="0" class="w180">
                  <tr>
                    <td><multiline label="Description">Enter your description</multiline></td>
                    <td width="75"><img alt="Property Broker" width="75" border="0" editable="true" label="Image" /></td>
                  </tr>
                </table>
              <td width="15" class="w15"></td>
            </tr>
          </table></td>
      </tr>
      <tr>
        <td style="border: 1px solid #ccc;">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
      </tr>
    </table>
  </layout>
</repeater>

Thanks, rmcfadden! I hope that helps :)


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

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