I am facing alignment issue in outlook. I am sending following HTML code in mail.
<strong>Test Summury</strong><br>
<table border=0>
<tr style='width:100%;display:block'>
<td valign="middle" style='white-space:nowrap;width:100%;display:block;font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;width:100%'>
<img src='https://ci5.googleusercontent.com/proxy/8S3emk_N9__9dGjV9Sj9qnYVQWLj6dp4ukTDwGoDq3esYAjOleQ_g8PNqrI8-a_FCVltErovcE0AhZwr6L-I_lutmAu8RgE3oi38y-8=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Duration.png' style='display:inline;margin:5px 0 0 0'>
<p style='display:inline-block;width:15%;margin-left:5px'><b>2 min</b><br>Duration</p>
<img src='https://ci6.googleusercontent.com/proxy/J9_xwl9q8wAIQw7DMq1CkOAKmMhDK9padlPL1jlpzwruQ9lquwQs-sl9g0gfSUdSo0UHny5IQC0VaqxliEL3QZHgdaT1mt4mkAA=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/users.png' style='display:inline;margin:10px 0 0 0'>
<p style='width:13%;margin-left:11px;display:inline-block'><b>12 vu</b><br>Max Users</p>
<img src='https://ci5.googleusercontent.com/proxy/G05_y_qOOgjUTuvc3Jnllh_DnglVGpp86Sp9BhTi0cCV7-BJUjht8APtujeMwTL-pMEh7WQkH_PyY1L5UyTtxaFWyWasJiUfBQ=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Hits.png' style='display:inline;margin:10px 0 5px 20px'>
<p style='width:20%;margin-left:11px;display:inline-block'><b>13 Hits/s</b><br>Avg Throughput</p>
<img src='https://ci5.googleusercontent.com/proxy/uzImvaoO6Qkxx3A9uC7cV6rZ6qndIo6LRux-l2MylOkfvLU1VflPp_wNdQFdhjDTsZb2cGCfOSe9pXaMbasIq2nS6lS9BrM_3f7b=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Errors.png' style='display:inline;margin:5px 0 5px 20px'>
<p style='width:11%;display:inline-block;margin-left:11px'><b>100%</b><br>Error</p>
</td></tr></table>
In gmail, it is aligned as I needed,
however in outlook email it gets distorted.
As the other guy said you code needs a lot of work. Below is what i did with your code. I placed your images and paragraph tags into a table sitting side a div. You will notice outlook conditional statements, these will be ready by outlook only.
This method of coding is called ghost columns and is part of hybrid coding.
<table width="100%" border=0 cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="middle">
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/8S3emk_N9__9dGjV9Sj9qnYVQWLj6dp4ukTDwGoDq3esYAjOleQ_g8PNqrI8-a_FCVltErovcE0AhZwr6L-I_lutmAu8RgE3oi38y-8=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Duration.png' style='display:inline;margin:5px 0 0 0'></td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>2 min</b><br>Duration</p></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</td>
<td width="25%">
<![endif]-->
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci6.googleusercontent.com/proxy/J9_xwl9q8wAIQw7DMq1CkOAKmMhDK9padlPL1jlpzwruQ9lquwQs-sl9g0gfSUdSo0UHny5IQC0VaqxliEL3QZHgdaT1mt4mkAA=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/users.png' style='display:inline;margin:10px 0 0 0'> </td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>12 vu</b><br>Max Users</p></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</td>
<td width="25%">
<![endif]-->
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/G05_y_qOOgjUTuvc3Jnllh_DnglVGpp86Sp9BhTi0cCV7-BJUjht8APtujeMwTL-pMEh7WQkH_PyY1L5UyTtxaFWyWasJiUfBQ=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Hits.png' style='display:inline;margin:10px 0 5px 20px'> </td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>13 Hits/s</b><br>Avg Throughput</p></td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</td>
<td width="25%">
<![endif]-->
<div style="width:24%; vertical-align:top; display:inline-block;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><img src='https://ci5.googleusercontent.com/proxy/uzImvaoO6Qkxx3A9uC7cV6rZ6qndIo6LRux-l2MylOkfvLU1VflPp_wNdQFdhjDTsZb2cGCfOSe9pXaMbasIq2nS6lS9BrM_3f7b=s0-d-e1-ft#https://s3.amazonaws.com/bzimages/mandrill/Errors.png' style='display:inline;margin:5px 0 5px 20px'> </td>
</tr>
<tr>
<td align="center" valign="top" style='font-family:sans-serif;font-size:100%;color:#494961;padding:0px 2px;line-height:23px;letter-spacing:0.027em;word-spacing:0;'><b>100%</b><br>Error</p></td>
</tr>
</table>
</div>
</td></tr></table>
Let me know if this is the answer you were after.
Related
I have problem with the image background for email template. As you see the screenshots, I want the email in Outlook for Window 7/10 will display the same as Outlook for MacOS. But unfortunately, it doesn't work. I try many times but cannot figure out the reason why the body container always has the space between it and footer container. Please help me to solve this problem! My code is below
:(enter image description here
<!-- BODY START // -->
<tr>
<td>
<!--[if gte mso 9]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600" style="width:600px;" role="presentation">
<tr>
<td align="center" valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" mc:repeatable="" role="presentation" width="100%">
<tr>
<td background="http://test.agency-spring.digital/Bekreftelses/background-image.png" style="background-image:url(http://test.agency-spring.digital/Bekreftelses/background-image.png);background-repeat: no-repeat;
background-size:cover;background-position: center center;" bgcolor="#d1dce0" valign="top">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="tile" src="http://test.agency-spring.digital/Bekreftelses/background-image.png" style="background-size:cover;background-position: center center;background-repeat: no-repeat;" color="#d1dce0" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<!-- test -->
<div>
<div style="">
<table role="presentation" class="templateContainer" width="600" style="width:600px;" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td height="" align="center">
<table border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
<tbody>
<tr>
<!-- divider -->
<td width="600" padding="55px 30px 0"
style="width:100%;padding:55px 30px 0;border-spacing: 0;">
<table width="600" border="0" cellpadding="0" cellspacing="0" align="left" style="border-spacing: 0;">
<tbody>
<tr>
<td>
<table align="left" cellspacing="0" cellpadding="0" border="0" width="42" height="6" style="background:#e40532; height:6px;width:42px;">
<tr>
<td width="42" height="6" style="height:6px;width:42px;font-size:0; line-height:6px;">
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<!-- end -->
</tr>
<tr class="row-1-column" mc:repeatable="" mc:variant="Row-1-column">
<td width="600" padding="5px 30px 0 30px"
style="width:100%;padding:5px 30px 0 30px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
width="100%">
<tbody>
<tr>
<td>
<div mc:edit="row1column__texta">
<h1>Tak for din bestilling!</h1>
<p> </p>
<p>{{Name}}</p>
<p>{{Address}}</p>
<p>Tlf. {{Phone}}</p>
<p>Reg.nr.: {{CarReg}}</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="row-1-column" mc:repeatable="" mc:variant="Row-1-column">
<td width="600" padding="25px 30px 0 30px"
style="width:100%;padding:25px 30px 0 30px;">
<table border="0" cellpadding="0" cellspacing="0" role="presentation"
width="100%">
<tbody>
<tr>
<td>
<div mc:edit="row1column__texta">
<p padding="20px 0" color="#e40532"
style="color:#e40532;font-weight: bolder;padding:20px 0 10px;">
Du har bestilt følgende:</p>
<p padding="20px 0" color="#e40532"
style="font-weight: bolder;padding:20px 0 10px; ">
{{OrderLines}}</p>
<p padding="20px 0" color="#e40532"
style="font-weight: bolder;padding:20px 0 10px;">
{{Services}}</p>
<p>Din bookede tid:<p>
<p padding="0" color="#e40532"
style="font-weight: bolder;padding:0;">
{{BookingTime}}
<span style="font-weight:normal"> hos
</span><span>{{Department}}</span></p>
<p padding="20px 0" style="padding:20px 0 10px;">Kontakt
din afdeling, hvis du vil ændre eller aflyse
din booking.</p>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr class="row-2-column" mc:repeatable="" mc:variant="Row-2-column">
<td width="600" padding="55px 30px 0" style="width:100%;padding:55px 30px 0;"
align="left">
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="left"
style="width: 100%;">
<tbody>
<tr>
<td width="270" style="width:50%;" align="left">
<table>
<tbody>
<tr>
<td>
<table align="left" cellspacing="0" cellpadding="0" border="0" width="18" height="4" style="background:#e40532; height:4px;width:18px;">
<tr>
<td width="18" height="4" style="height:4px;width:18px;font-size:0; line-height:4px;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<h2 padding="0 0 20px"
style="padding:0 0 20px;">Vi glæder os til<br> at servicere din bil
</h2>
<p style="line-height: 150%;">
Hvis du har spørgsmål - eller hvis der
er noget, der ikke stemmer, så
ring til os på <span
style="font-weight: bolder;">tlf. 7615 3000</span></p>
</td>
</tr>
</tbody>
</table>
</td>
<td width="270" style="width:50%;" padding="0">
<table width="270" style="width:100%;" align="left" cellspacing="0" cellpadding="0" border="0" style="max-width: 100%;width:270px;">
<tbody>
<tr>
<td>
<img width="270" style="max-width:100%; width:270px;height: auto;" src="http://test.agency-spring.digital/Bekreftelses/S%C3%B8ren.png" alt="Soren" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</div>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:fill>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
<!-- // BODY END -->
I've got an image within a relatively complex table structure and inside a td tag. I'm trying to make the image response so that when the page is viewed on mobile, the image is slightly scaled down vs. when viewed on a desktop i.e. ideally, I want it to be 50% of the width page.
I've tried adding a max-width on the img tag as well as the tg tag outside it and neither appeared to work.
My code:
<html>
<table bgcolor="#efefef" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<![endif]-->
<table width="100%" class="maxW" style="max-width: 600px; margin: auto;" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="center">
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0" style="padding-bottom:10px">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="94%" border="0" cellpadding="0" cellspacing="0" style="padding-bottom:10px">
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="middle" style="font-family:Helvetica, Arial, sans-serif; font-size: 12px; color: #353535; padding:3%; padding-top:5px; padding-bottom:5px;">
.........
</td>
</tr>
<tr>
<td align="center" valign="middle" style="padding:1%; padding-top:10px; padding-bottom:5px;"><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="max-width: 50%"></img></td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</html>
You can try display:inline-block for every column in your table. It will make the columns shift below each column when width of the screen decreases and make tr text-align: center;
I am trying to create a responsive HTML email. The two columns should be equal height and they currently stack on mobile. Everything works properly until there is a lot of text as the Billing Information or Shipping Information. It's an unlikely case that the text will ever look like this, but I must handle all possibilities without the email breaking. How can I make my td stretch vertically instead of horizontally? I cannot use a fixed width as it will break the responsiveness of my table.
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnTextBlock" width="100%">
<tbody class="mcnTextBlockOuter">
<tr>
<td valign="top" width="100%" class="mcnTextBlockInner" style="padding-top:9px; padding-right:18px; padding-left: 18px; padding-bottom: 15px;">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" bgcolor="white" border="0" cellpadding="5" cellspacing="0" style="max-width:100%; min-width:100%;" width="100%" class="mcnTextContentContainer">
<tbody>
<tr>
<td valign="top" width="50%" class=" templateColumnContainer"">
<!--<td valign="top" width="300" class="mcnTextBlockInner" style="padding-top:9px;padding-right:18px;padding-left:18px;padding-bottom:15px;"> -->
<table border="0" cellpadding="5" cellspacing="0" width="100%" style="max-width:100%; min-width:100%;" class="mcnTextContentContainer">
<tr>
<td valign="top" align="center" class="leftColumnContent" style="text-align: center;" >
<span style="color:#000000; font-size:18px; display: block; width:100%; height:auto;"><strong>Billing Information</strong></span>
</td>
</tr>
<tr>
<td valign="middle" class="leftColumnContent" style="text-align: center;">
<span style="font-size:14px; color: #000000!important;">{{ receipt.order.get_billing_html|safe }}</span>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent" style="text-align: center;">
<span style="font-size:18px; color:#000000; text-align:center; display: block; width:100%; height:auto;"><strong>Shipping Information</strong></span>
</td>
</tr>
<tr>
<td valign="middle" class="rightColumnContent" style="text-align: center;">
<span>
Shipping Address
</span>
<br><span style="font-size:14px; color: #000000!important;">Shipping speed description
{% endif %}
{% if receipt.order.shipper_tracking_number %}
<br><strong style="color: #000000;!important">Tracking: </strong>Shipper Name</span><br>
<a href="shipping tracking number" target="_blank" style="color: #000000; font-size: 14px;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Found the answer in post: HTML CSS How to stop a table cell from expanding
Using style="overflow-wrap: break-word;" on the <td> solved my problem. It is compatible across Gmail, Apple Mail, Yahoo, latest Outlook.
I'm making a responsive email template. The problem I'm encountering is that I want the icon to be align left of the text. How can I accomplish this? I've been stuck for while on this.
Edit: This is an updatey update with text words because I can't save my changes unless I have more wordy words and less codey code.
<body yahoo="yahoo" bgcolor="#f6f8f1">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="header" bgcolor="c7d8a7">
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table width="70" align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="70" style="padding: 0 20px 20px 0;">
<img src="http://i.imgur.com/38a0Gpi.png" width="70" height="70" border="0" alt="" />
<!--[if (gte mso 9)|(IE)]>
<table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">
<tr>
<td height="70">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="subhead" style="padding: 0 0 0 3px;">
COFFEE SHOP
</td>
</tr>
<tr>
<td class="h1" style="padding: 5px 0 0 0;">
Responsive Email Mockup
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</body>
Like this?
I wrapped the image in a td of its own by adding </td><td> after the img
<td height="70" style="padding: 0 20px 20px 0;">
<img src="http://i.imgur.com/38a0Gpi.png" width="70" height="70" border="0" alt="" />
</td>
<td>
<!--[if (gte mso 9)|(IE)]>
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>