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

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098