Currently working on coding for Email:
I am trying to get this button (created out of tables) to align to the bottom of the enclosing table. At the moment it will not align and I'm not sure why.
<table width="300" min-width="300" height="500" class="promo_3" align="left">
<tr>
<td valign="top">
<a target="_blank" href="http://www.thing.html">
<img class="promo" alt="Promo image 2" src="http://media.campaigner.com/image1.jpg">
</a>
<br>
<br>
<h1> TRAINING </h1>
<span valign="top" class="content">TITLE HERE</span>
<p>TEXT HERE</p>
<br>
<!--Button THIS WILL NOT ALIGN TO THE BOTTOM -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:20px;">
<tr>
<td height="20">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#f55926" valign="bottom" style="padding: 8px 30px 8px 30px; -webkit-border-radius:3px; border-radius:3px" align="center">Read More
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Button + Social End -->
</td>
</tr>
</table>
Maybe give this method a try:
<table width="300" min-width="300" height="500" class="promo_3" align="left">
<tr>
<td valign="bottom"><br>
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="200" valign="top"><a target="_blank" href="http://www.thing.html"><img class="promo" alt="Promo image 2" src="http://media.campaigner.com/image1.jpg"></a></td>
</tr>
<tr>
<td height="200" valign="top">
<h1> TRAINING </h1>
<span valign="top" class="content">TITLE HERE</span>
<p>TEXT HERE</p>
</td>
</tr>
</tbody>
</table>
<br>
<!--Button THIS WILL NOT ALIGN TO THE BOTTOM -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:20px;">
<tr>
<td height="20">
<table border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#f55926" valign="bottom" style="padding: 8px 30px 8px 30px; -webkit-border-radius:3px; border-radius:3px" align="center">Read More
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Button + Social End -->
</td>
</tr>
</table>
What I have done is added one table with two rows, both the rows have specific height with content aligned top. Some email clients are notorious and might not align the code to the bottom as it is on the code, for those email clients you can use padding-top on the TD's. Hope this helps.
Cheers
This is what you are looking for? Just add align='left' to table containing button.
<table width="300" min-width="300" height="500" class="promo_3" align="left">
<tr>
<td>
<a target="_blank" href="http://www.thing.html">
<img class="promo" alt="Promo image 2" src="http://media.campaigner.com/image1.jpg">
</a>
<br>
<br>
<h1> TRAINING </h1>
<span valign="top" class="content">TITLE HERE</span>
<p>TEXT HERE</p>
<br>
<!--Button THIS WILL NOT ALIGN TO THE BOTTOM -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="padding-bottom:20px;">
<tr>
<td height="20">
<table border="0" align='left' cellspacing="0" cellpadding="0" align="center">
<tr>
<td bgcolor="#f55926" valign="bottom" style="padding: 8px 30px 8px 30px;-webkit-border-radius:3px; border-radius:3px" align="center">Read More
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--Button + Social End -->
</td>
</tr>
</table>
Related
I am making a HTML email that a clients suddenly want to be shown as a one-pager without scrollbars. I have edited the wrapper to 'height:100vh', but it still has scrollbars.
I want to know, how would i go about and make this page appear as a one pager without scrollbars in all different screen heights?
<body>
<table width="100%">
<tbody>
<tr>
<td class="wrapper" width="600" align="center">
<!-- Header image -->
<table class="section header" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column center">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/header2.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="section main" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table style="margin: 0 auto;">
<tbody>
<tr>
<td align="left">
<img src="./media/main-image1.png" alt="picsum" width="600"/>
<br>
<div class="firstparagraph">
<p class="comfortaaquote font40"> You will be OK... </p><br>
<span class="marck"> Sweetheart</span>
</div>
<br>
<br>
<p class="comfortaatext center2">A lady is reassuring her dog everything will be OK in the veterinary hospital in Hanoi, Vietnam while the vet nurse are busy working in the background</p>
<br>
<div class="buttons">
<div class="days-counter">
<img class="steps" src="./media/counter.png" alt="picsum" width="300" />
<div class="text-block"><p>14</p></div>
</div>
<img class="submit" src="./media/submit.png" alt="picsum" width="300" />
<br>
<br>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<!-- bottom part-->
<!-- footer part-->
<table class="section bottom" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="column">
<table>
<tbody>
<tr>
<td align="left">
<img src="./media/bottom.png" alt="picsum" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
should i be targeting the height:100vh to the body or the wrapper?
thank you
I have no idea what's going on. The sections show up in preview and test emails, but when I add template to a campaign, suddenly the Contact and Facebook section is gone. WHYYY. It makes no sense why it's just disappearing when I add it to a campaign. This is the section that disappears when I add email template to the campaign. Is something wrong with the tables? I looked at CSS and there's hardly anything.
<!-- Facebook Recommendation -->
<div mc:repeatable="Select" mc:variant="facebook recommendation">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#231C15">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:60px 0px 60px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:40px;line-height:40px;text-align:center;font-weight:bold;padding-bottom:20px;">
<div mc:edit="text_16">Recommend us on Facebook!</div>
</td>
</tr>
<tr>
<td class="text pb20" style="color:#fff;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_18">Recommend us on our Facebook page! This ensures we can reach even more people to provide the best possible care during their move! </div>
</td>
</tr>
<!-- Button -->
<tr mc:hideable>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="text-button" style="background:#fff;color:#231C15;font-family:Lato, Arial, sans-serif;font-size:14px;line-height:18px;padding:12px 20px;text-align:center;letter-spacing:1px;font-weight:600;text-transform:uppercase;border-radius:22px;">
<div mc:edit="text_19">
<span class="link-white" style="color:#231C15; text-decoration:none;">RECOMMEND US</span>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- END Button -->
</table>
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- Facebook Recommendation -->
<!-- Contact -->
<div mc:repeatable="Select" mc:variant="Contact">
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#f4f4f4">
<tr>
<td valign="top" align="center" class="p30-15" style="padding:30px 0px 0px 0px;">
<table width="650" border="0" cellspacing="0" cellpadding="0" class="mobile-shell">
<tr>
<td class="td" style="width:100%;font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="h3 center pb15" style="color:#000000;font-family:Roboto, Arial, sans-serif;font-size:24px;line-height:32px;font-weight:bold;text-align:center;padding-bottom:10px;">
<div mc:edit="text_37">Contact Us</div>
</td>
</tr>
<tr>
<td class="text-center pb30" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:15px;line-height:30px;text-align:center;padding-bottom:20px;">
<div mc:edit="text_38">Looking to make another move? <br>Give us a call!</div>
</td>
</tr>
<tr>
<td align="center" style="padding-bottom:50px;">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/1a994bda-97c5-4ebf-b478-de1e3e2e6d6c.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_20">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_39">
<strong class="link" style="color:#777777;text-decoration:none;">855-624-4537</strong>
</div>
</td>
</tr>
</table>
</th>
<th class="column-empty2" width="30" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column-top" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;">
<table class="center" border="0" cellspacing="0" cellpadding="0" style="text-align:center;">
<tr>
<td class="img" width="50" style="font-size:0pt;line-height:0pt;text-align:left;"><img src="https://gallery.mailchimp.com/0d9e3bf61406dcc2f6b321e6d/images/9e146158-5e5d-4d4d-a99e-02f32506799a.png" width="34" height="34" style="max-width:34px;" border="0" alt="" mc:edit="image_21">
</td>
<td class="text" style="color:#777777;font-family:Roboto, Arial, sans-serif;font-size:16px;line-height:30px;text-align:left;">
<div mc:edit="text_40">
<a target="mailto:service#moveandstore.com" class="link" style="color:#777777;text-decoration:none;"><strong class="link" style="color:#777777;text-decoration:none;">service#moveandstore.com</strong></a>
</div>
</td>
</tr>
</table>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" dir="rtl" style="direction:rtl;">
<tr>
<th class="column" dir="ltr" width="433" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
<th class="column-empty" dir="ltr" width="40" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;vertical-align:top;"></th>
<th class="column" dir="ltr" style="font-size:0pt;line-height:0pt;padding:0;margin:0;font-weight:normal;">
</th>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!-- END Contact -->
Okay - From my limited knowledge with MailChimp I think I have stumbled across something.
I see in your table you have the mc:repeatable="Select" attribute. From the MailChimp help section - this says that this will be hidden automatically unless a user adds it via the campaign builder.
Add the mc:repeatable attribute to any area that includes an mc:edit attribute to create a content block that can be repeatedly added to a template. Repeatable content areas are hidden by default so they only appear in a template if you add them within the Campaign Builder.
Source: Mailchimp help (create editable content areas with mailchimps template language)
I am coding a menubar for an e-mail - therefore the messy tables. I need the two menuoptions "Point" and "My profile" to be aligned in the right side of the table:
<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
<tbody>
<tr>
<td style="padding:10px 0px 10px 0px" align="center" valign="top">
<table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
<tbody>
<tr>
<td align="left" width="35" valign="top"> </td>
<td align="center" width="590" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
<tbody>
<tr>
<td style="padding:7px 0px 7px 0px" align="center" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8" align="center" valign="top">
Book
<span> </span>
Gift
<span> </span>
Voucher
<span> </span>
<span> </span>
<b>Point:</b>
<span> </span>
<b>My profile</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="35" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JSFIDDLE
I have tried to set a text-align:right; on the a tag, the td tag, but I cannot get the two options to align right.
I can align them right if I set the text-align on the table. But then all the text are aligned right.
Does anybody have an idea what I am doing wrong here?
I think this will work for you -
I have put the inner table width to 100% and split you <a> tag to two <td> and gave them float.
<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
<tbody>
<tr>
<td style="padding:10px 0px 10px 0px" align="center" valign="top">
<table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
<tbody>
<tr>
<td align="left" width="35" valign="top"> </td>
<td align="center" width="590" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
<tbody>
<tr>
<td style="padding:7px 0px 7px 0px" align="center" valign="middle">
<table style="border-collapse:collapse;width:100%" cellspacing="0" cellpadding="0" border="0" align="left" width: "100%">
<tr>
<td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8;float:left" align="center" valign="top">
Book
<span> </span>
Gift
<span> </span>
Voucher
<span> </span>
<span> </span>
</td>
<td style="float:right">
<b>Point:</b>
<span> </span>
<b>My profile</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="35" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Hope this is helpfull for you.
try this snippet:
<a href="http://example.com"
style=
"color:#004b60;
text-decoration:none;
background-color: red;
padding: 5px 10px 5px 10px;
margin-left:250px;"
target="_blank"><b>Point:</b>
</a>
use margin-left:250px; instead of text-align: right;
check the fiddle: https://jsfiddle.net/hfsd62eg/1/
I'm editing a bought responsive email template. Below you can see the structure used.
The email is responsive on the web version and on desktop browser email clients. But when testing it on mobile email apps like Gmail, the structure breaks, and on Yahoo it displays the desktop version.
After cleaning up the code, and testing diferent versions... I think the problem is in the section where there is a background full width and then a normal width table with 2 images.
I tried putting the background on the top <table> and then on the <td> but it still don't work on mobile email apps like Gmail or Yahoo.
I don't know if I'm missing up something, or I'm doing something wrong. It only breaks on mobile email apps.
Thanks in advance.
Here is the code of the top section.
<table class="main-header" data-module="Header" data-bgcolor="Header" data-bg="Header" style="position: relative; opacity: 1; z-index: 0; background-image: url(https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg); background-size: cover; background-position: 50% 40%;" background="https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="zay600" border="0" align="center" cellpadding="0" cellspacing="0">
<table cellspacing="0" cellpadding="0" align="center" border="0" width="90%" class="zay600">
<!-- img -->
<tbody><tr>
<td align="center">
<table align="center" class="zay600" width="600" border="0" cellspacing="0" cellpadding="0">
<!-- logo -->
<tbody><tr>
<td>
<table align="left" class="zay3-3" width="120" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="40">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center" valign="middle" style="line-height:0px;">
<img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="249" height="70" alt="img">
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--Space-->
<table width="1" height="30" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody><tr>
<td height="30" style="font-size: 0;line-height: 0;border-collapse: collapse;">
<p style="padding-left: 24px;">
</p>
</td>
</tr>
</tbody></table>
<table align="right" class="zay3-3" width="280" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="50">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center">
<table class="zay-inner" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;"><img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="280" height="36" alt="img">
</td></tr>
</tbody></table>
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--End Space-->
</td>
</tr>
<!-- menu -->
<!-- end menu -->
</tbody></table>
</td>
</tr>
<!-- end logo -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
<!-- subtitle -->
<tr>
<td>
<!-- content -->
<table class="zay600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center">
<table border="0" width="184" align="center" cellpadding="0" cellspacing="0" class="container580">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
</tbody></table>
<!-- end content -->
</td>
</tr>
<!-- end subtitle -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I'm trying to create an embedded table with three tables for an email. The reason why I'm using tables is because I want the tables to stack one on top of another when the email renders on a smaller screen. Not all email clients read CSS well, so I'm looking for inline HTML coding, not a CSS solution.
The content table in total is 600px wide. And within that, Table 1 is 299px wide, table 2 is 2px wide, and table 3 is 299 px wide.
The first challenge I had was the row height on table 2 wasn't 100% with tables 1 and 3. I fixed that by changing the row height to 100% on the content table and in table 2. That seems to fix the row height for table 2, but then table three gets pushed down.
Here is the jsfiddle: https://jsfiddle.net/robertschlotzhauer/snk6pjb9/
<table border="0" cellpadding="0" cellspacing="0" width="600" height="100%">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="299">
<tbody>
<tr>
<td style="padding:10px 15px 10px 15px;line-height:18px">
<div align="center">
<font style="font-family:Arial;font-size:16px;">
<b>
Text
</b>
</font>
</td>
</tr>
</tbody>
</table>
<table bgcolor="#8C231C" border="0" cellpadding="0" cellspacing="0" height="100%">
<tbody>
<tr>
<td style="line-height:2px" bgcolor="#8C231C" width="2px">
<font style="font-size:2px">
</font>
</td>
</tr>
</tbody>
</table>
<table border="0" cellpadding="0" cellspacing="0" width="299" valign="top" align="right">
<tbody>
<tr>
<td style="padding:10px 20px 0px 20px;line-height:18px">
<div align="center">
<font style="font-size:16px;" face="arial">
<b>
Text text text
</b>
</font>
<br>
<br>
<font style="font-size:12px;" face="arial">
Text text text
</font>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Any recommendations on cleaning this up would be helpful.
You will need to do CSS. There is no raw html way to really do it. You can do mostly through inline, but there will be some backup media query necessary. see below code snippet:
.contenttable {width:600px;}
.big {width:299px;}
#media only screen and (max-width: 600px) {
table {width:100% !important; max-width:none !important;}
td {border-collapse:collapse !important; padding-left:0 !important; padding-right:0 !important;}
}
<body>
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="299" align="left">
<![endif]-->
<table class="contenttable" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px;">
<tbody>
<tr>
<td style="font-size:1px; mso-line-height-rule:exactly; line-height:5px" bgcolor="#8C231C" height="5"> </td>
</tr>
<tr>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr height="100%">
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:299px;" class="big">
<tbody>
<tr>
<td align="center" style="font-family:Arial;font-size:16px; padding-left:10px; padding-bottom:15px; padding-right:10px; padding-top:15px; line-height:18px"><b>In This Issue</b></td>
</tr>
<tr>
<td align="center">
<table align="center" width="299" cellpadding="0" cellspacing="0" border="0" style="width:299px !important;">
<tr>
<td align="left" style="font-family:Arial;font-size:12px">
<ol>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
<li>
<font style="font-family:Arial;font-size:12px;">
Text text text
</font>
</li>
</ol>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td align="right" width="299">
<![endif]-->
<table align="right" border="0" cellpadding="0" cellspacing="0" width="100%" style="max-width:299px;" class="big">
<tbody>
<tr>
<td align="center" style="padding-left:10px; padding-bottom:10px; padding-top:20px; font-size:16px; font-family:Arial; line-height:18px"><b>Text text text</b></td>
</tr>
<tr>
<td align="center" style="padding-left:10px; padding-bottom:20px; font-size:12px; font-family:Arial; line-height:15px">Text text text</td>
</tr>
<tr>
<td align="center" style="padding-left:10px; padding-bottom:10px;"><img style="width:150px;height:50px;" src="http://img.en25.com/EloquaImages/clients/LaurelSpringsSchool/{b3492627-ee05-4126-9344-9e00be069cd3}_P7-1314_RegisterNowRed__Button.jpg"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="font-size:1px; mso-line-height-rule:exactly; line-height:5px" bgcolor="#8C231C" height="5"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>