3 Replies Latest reply: Apr 18, 2012 11:21 AM by Rik Ramsay RSS

    Resolving table tag issues in HTML e-mail template

    psurazz Community Member

      Thanks for previous advice creating HTML e-mail. Everyone responded to avoid Photoshop because of the way each e-mail client handles the output. Thanks for the tip on Email On Acid. What a hoot.

       

      So, I downloaded an HTML newsletter template and made it my own using Taco Edit HTML. Running it through the Email On Acid thing, the output on MS clients seems OK. One of the paragraphs shifted to Right Aligned, while every other client kept it at Center Aligned. The the output still looked bad on Gmail. Since this is B2B, my customers don't use Gmail and mostly are on some MS client, I'm more worried about those.

       

      Two things I would still like to ask:

       

      On the example below, Taco is giving me the syntax error: "Unmatched Tag - The <table> tag is closed implicity by the </td> tag." Lines 27, 97, 115, 116. This is HTML 101, but I just can't isolate it.

       

      And. Is there a better suggestion for an HTML generator? Something more WYSIWYG than Taco. I would like something that can better identify my tables. Right now, I just change the Border to 1 px, to see where I am working. I used iWeb to create my website, so I would guess, I'm going to have the same issues as PS with HTML e-mail. And, I'm transitioning to RapidWeaver, which doesn't give you any access to the code either.

       

      http://doncamacho.com/dyk_assets/index.html

        • 1. Re: Resolving table tag issues in HTML e-mail template
          Rik Ramsay Community Member

          There was so much out of place with that code that it was easier/quicker to fix than it was to explain how to fix it. HTML emails need to be constructed from the "outside in" so you need a container to hold everything in place - something your code was missing. You can test the layout but I haven't spent a great deal of time on it. You will also need to move the styles inline - most webmail (gmail etc) strip out the head tags. Try: http://beaker.mailchimp.com/inline-css

           

          Your % widths were also changed to px widths. Outlook is not a fan of %. See here for more info: http://24ways.org/2009/rock-solid-html-emails

           

          As for the email editor, your in a Dreamweaver forum - try that? Hopefully with the below you will have a good enough foundation to start from. Enjoy.

           

           

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          <title>DC&A New Line List</title>
          <style type="text/css">
          body {
                    font-size: 12px;
                    color: #666;
                    margin: 0;
                    padding: 0;
                    font-family: Georgia, Times New Roman, Times, serif;
          }
          .content p {
                    font-size: 14px;
                    color: #333333;
                    margin-top: 0px;
                    margin-bottom: 12px;
                    padding: 0;
                    font-family: Arial, Helvetica, sans-serif;
          }
          .footer p {
                    font-size: 12px;
                    color: #666;
                    margin: 0;
                    padding: 0;
                    font-family: Arial, Helvetica, sans-serif;
          }
          ul {
                    margin: 0;
                    padding-left: 14px;
                    line-height: 18px;
                    list-style: disc;
          }
          li {
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 14px;
                    color: #cc0000;
                    font-weight: bold;
                    margin: 0;
                    padding: 0;
          }
          </style>
          </head>
          <body style="margin: 0; padding: 0; background-color: #d8e7ea;">
          
          
          <!--100% body table-->
          <table width="100%" cellpadding="0" cellspacing="0" align="center">
            <tr>
              <td><!-- container -->
                
                <table width="620" cellpadding="0" cellspacing="0" align="center">
                  <tr>
                    <td><!-- head -->
                      
                      <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                          <td valign="middle" align="center" height="30" bgcolor="#0d2d42"><p style="font-family: Arial, Helvetica, sans-serif; text-align:center; font-size: 14px; color: #FFF; text-transform: uppercase; margin: 0; padding: 0;">Email not looking beautiful? <a style="color: White; " href="http://doncamacho.com/dyk_assets/index.html" title="Open in your browser">Open in your browser</a> </p></td>
                        </tr>
                      </table>
                      
                      <!--/header text--> 
                      
                      <!--intro-->
                      
                      <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                          <td width="620" height="10" colspan="3"></td>
                          <!-- space --> 
                        </tr>
                        <tr>
                          <td valign="middle" width="40" height="100"></td>
                          <td class="header" width="550" height="100"><img style="margin: 0; padding: 0; display: block; border: 0px solid #000000;" src="http://doncamacho.com/dyk_assets/images_dyk/zing_header.gif"width="550" height="137" alt="img1"label="Image" /></td>
                          <td width="30" height="100" valign="top"></td>
                        </tr>
                        <tr>
                          <td width="620" height="10" colspan="3"></td>
                          <!-- space --> 
                        </tr>
                      </table>
                      
                      <!--/intro--> 
                      
                      <!--content section-->
                      
                      <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                          <td height="82" width="11" valign="middle"><img style="margin: 0; padding: 0; display: block;" src="http://doncamacho.com/dyk_assets/images/side-corner.png" width="11" height="83" /></td>
                          <td height="82" bgcolor="#FFFFFF" valign="middle"><table width="609" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td height="23" colspan="3"></td>
                              </tr>
                              <tr>
                                <td height="37" bgcolor="#cc0000" width="542"><h1 style="margin:0;color: #fff;font-size: 21px; line-height:21px;font-family: Arial, Helvetica, sans-serif;text-shadow: 1px 1px 1px #000;"> We've updated our line list! </h1></td>
                                <td height="37" bgcolor="#cc0000" width="47"><img src="http://doncamacho.com/dyk_assets/images/bar-end.png" width="47" height="37" style="display:block; border:none;" /></td>
                                <td width="20"></td>
                              </tr>
                              <tr>
                                <td height="22" colspan="3"></td>
                              </tr>
                            </table></td>
                        </tr>
                      </table>
                      <table width="620" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                          <td width="11"></td>
                          <td valign="top" bgcolor="#FFFFFF" width="20"></td>
                          <td valign="top" bgcolor="#FFFFFF" width="429" align="left"><p><B>We have updated our line list effective April 1st.</B></p>
                            <p>Please take a look at our latest Additions</p>
                            <ul style="list-style-type: circle;">
                              <li>Orved Vacuum Sealers</li>
                              <li>Viking Commercial Range</li>
                              <li>US Refrigeration - Stocked Locally</li>
                              <li>New Line List format includes factory weblinks!</li>
                            </ul>
                            <p><a href="http://www.orved.com" title="Welcome to Orved USA"><img style="border-width: 0px; display:block;" src="http://doncamacho.com/dyk_assets/logos/Orved%20logo.jpg" width="200" height="71" /></a></p>
                            <p> </p></td>
                          <td bgcolor="#FFFFFF" valign="top" width="150" align="left"><a href="http://doncamacho.com/About_Us_files/DCA%202012%20Line%20List.pdf" title="Click Here to Download"><img src="http://doncamacho.com/dyk_assets/images_dyk/ipad_linelist.jpg" alt="" width="150" height="194" style="border-width: 0px; display:block;" /></a></td>
                          <td width="10" bgcolor="#FFFFFF"></td>
                        </tr>
                      </table>
                      
                      <!--/content section--> 
                      
                      <!--footer-->
                      
                      <table width="620" border="0" align="center" cellpadding="20" cellspacing="0">
                        <tr>
                          <td class="footer" valign="top"><p> You received this email because at some point in the past you either bought one of our products represented by Don Camacho & Associates. If you’d like, you can <a href="mailto:billr@doncamacho.com?subject=Unsubscribe from future mailings"title="unsubscribe">unsubscribe</a> </p></td>
                          <td valign="top"><!--button-->
                            
                            <table width="200" border="0" align="right" cellpadding="10" cellspacing="0">
                              <tr>
                                <td style="border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; color: #ffffff; text-align: center;" height="28" bgcolor="#0099ff"><a style="font-family: &quot;Comic Sans MS&quot;; font-weight: bold; color: White; text-decoration: none; " href="http://doncamacho.com/About_Us_files/DCA%202012%20Line%20List.pdf">Click to download</a></td>
                              </tr>
                            </table>
                            
                            <!--/button--></td>
                        </tr>
                      </table>
                      
                      <!--footer--> 
                      
                      <!--break-->
                      
                      <table width="620" border="0" cellspacing="0" cellpadding="0" align="center">
                        <tr>
                          <td height="25"></td>
                        </tr>
                      </table>
                      
                      <!--/break--></td>
                  </tr>
                </table>
                
                <!-- container -->
            </tr>
              </td>
            
          </table>
          <!--/100% body table-->
          </body>
          </html>
          
          
          • 2. Re: Resolving table tag issues in HTML e-mail template
            psurazz Community Member

            Geez. I can't thank you enough. This looked great in everything I tested. I found two things interesting:

             

            - I use a bulk mailer called Mailings (Mac). I insert Preamble text with a link to the browser version. This is now redundant, beacuse this is also imbedded in your example. When I test mail it from there, the Preamble text/link is shown on top of the background color of the HTML email message. Previously, this would have a white background. The effect just looks more professional. Thanks, however you did that.

             

            - The text above the list portion is coded as black, but varies between grey and black depending on client. Again, I like it. You indented the list, so it looks professional.

             

            Starting with a downloaded template, I have no idea how old that template was, so this affords me one where I would just swap out my factory logos and simple text lists.

             

            The Dreamweaver thing sounds like a good idea, but Adobe sure doesn't make it easy to be a customer. I own several old versions of GoLive and CS5.5 Design Standard. There is a crossgrade price for owners of GoLive, but I think mine are even too old for that. So basically it's $399.00USD for Dreamweaver OR Upgrade my CS Suite for $399.00USD (same price) and get stuff I already own - Ps, Id, Ai and Acrobat X. And stuff I don't want Flash, Fireworks. I know you can't help me there, but it's and odd pricing strategy.

             

            Thanks again.

            • 3. Re: Resolving table tag issues in HTML e-mail template
              Rik Ramsay Community Member
              I use a bulk mailer called Mailings (Mac). I insert Preamble text with a link to the browser version. This is now redundant, because this is also imbedded in your example. When I test mail it from there, the Preamble text/link is shown on top of the background color of the HTML email message. Previously, this would have a white background. The effect just looks more professional. Thanks, however you did that.

               

              Yes, you should only need to update the URL with each email campaign you send out and make sure the page is on your server. I am not sure how Mailers did it before but it was possibly adding a different style to the link when it added it itself. Best to do it in the code before hand.

               

               

              The text above the list portion is coded as black, but varies between grey and black depending on client. Again, I like it. You indented the list, so it looks professional.

               

              This is a result of the styles being in the <head> of the document. All text styles should be coded inline for them to remain consistent.

              Eg:

              <span style="font-size: 12px;color: #666;font-family: Georgia, Times New Roman, Times, serif;">

              <p><strong>We have updated our line list effective April 1st.</strong></p>

              <p>Please take a look at our latest Additions</p>

              </span>

               

              -OR-

               

              <p style="font-size: 12px;color: #666;font-family: Georgia, Times New Roman, Times, serif;"><strong>We have updated our line list effective April 1st.</strong></p>

              <p style="font-size: 12px;color: #666;font-family: Georgia, Times New Roman, Times, serif;">Please take a look at our latest Additions</p>

               

              If you have an entire table cell of text, you can add the style to the <td> element which will style everything inside.

               

               

              Unfortunately, I mainly use Dreamweaver or text edit for my HTML coding so I can't offer any advice on any open source alternatives. Your Taco version seemed interesting though.

              Glad I was able to help you out.

               

              Rik