Outlook 2013 Table Expanding - html

Coding an email and the rendering is fine on all other versions of Outlook save for 2013. When testing via litmus and actual Outlook2013, the table with the Japanese content / image expands. It's a pretty straight forward HTML table. See anything that I've missed?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td colspan="3">
<img src="http://images.ic.maximintegrated.com/EloquaImages/clients/MaximIntegratedProductsInc/%7Beb6785c3-c02f-40db-b10c-0a175e2820d5%7D_Re-engagement_header_2.jpg">
</td>
</tr>
<tr>
<td width="20"> </td>
<td width="560" style="padding-top:30px;">
<table width="560" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family:Arial, Helvetica,sans-serif;font-size:24px;color:#6E2585;font-weight:bold;font-height:27px;padding-bottom:30px;">
ワイヤレススピーカーが当たる耳よりな情報です
</td>
</tr>
<tr>
<td style="padding-bottom:30px;">
<table width="560" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#000000" height="110" valign="top" width="362">
<b>
<font style="font-size:16px;">お客様のMyMaximアカウントを更新して、60ドル相当のRoxBoxスピーカーが当たるキャンペーンに応募する</font></b>
<br>
<br>
MyMaximの会員特典は以前よりさらに良くなり、今、お客様情報を更新するだけで、マキシムの抽選に自動的に応募することができます。EE-Simツールを使って<b>カスタムの回路設計を数分で作成し</b>、1つのプロファイルで<b>技術サポートをいち早く受けることができます</b>。さらに、カスタマイズ可能なパネルを使って<b>１カ所ですべての情報を見つけることができます</b>。</td>
<td width="198" style="text-align:center;" align="center">
<center>
<img src="http://images.ic.maximintegrated.com/EloquaImages/clients/MaximIntegratedProductsInc/{dbe437de-2c33-4a04-a64c-59741cb0622f}_Wireless-Speaker.gif" style="display:block;" width="190">
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div>
<!--[if gte mso 9]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://ic.maximintegrated.com/FY16_Q1_2015_SEP_ReEngagement_LP_Japanese_MC?utm_source=eloqua&utm_medium=email&utm_content=Enter_Now&utm_campaign=FY16_Q1_2015_SEP_ReEngagement_Japanese_MC
" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="12%" stroke="f" fillcolor="#6e2585">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://ic.maximintegrated.com/FY16_Q1_2015_SEP_ReEngagement_LP_Japanese_MC?utm_campaign=H1%20Thank%20You%201%20-%20MC%20-%20JW%20Test&utm_medium=email&utm_source=Eloqua&utm_source=eloqua&utm_medium=email&utm_content=Enter_Now&utm_campaign=FY16_Q1_2015_SEP_ReEngagement_Japanese_MC
&elq=e734b2e1380b458c974801d66f3f0f90&elqCampaignId=&elqaid=508&elqat=1&elqTrackId=0e27b1ed2bf440979ad85531ba29d364" style="background-color:#6e2585;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">今すぐ応募する ></a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
</td>
</tr>
</table>
</td>
<td width="20"> </td>
</tr>
</table>
</body>
</html>


If I add "word-break:break-all" CSS to it, it works. I think the issue is just that MSO did not recognize a place to break the string, so it flowed out and stretched the table. No idea why this only happened in 2013 nor anything really on this. But by testing, this worked via EmailonAcid and on live tests I sent to myself. Below is code I used:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 600px">
<tr>
<td colspan="3">
<img src="http://images.ic.maximintegrated.com/EloquaImages/clients/MaximIntegratedProductsInc/%7Beb6785c3-c02f-40db-b10c-0a175e2820d5%7D_Re-engagement_header_2.jpg">
</td>
</tr>
<tr>
<td width="20"> </td>
<td width="560" style="padding-top:30px;">
<table width="560" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family:Arial, Helvetica,sans-serif;font-size:24px;color:#6E2585;font-weight:bold;font-height:27px;padding-bottom:30px;">
ワイヤレススピーカーが当たる耳よりな情報です
</td>
</tr>
<tr>
<td style="padding-bottom:30px;">
<table width="560" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#000000; word-break:break-all;" height="110" valign="top" width="362">
<b>
<font style="font-size:16px; word-break:break-all;">お客様のMyMaximアカウントを更新して、60ドル相当のRoxBoxスピーカーが当たるキャンペーンに応募する</font></b>
<br>
<br>
MyMaximの会員特典は以前よりさらに良くなり、今、お客様情報を更新するだけで、マキシムの抽選に自動的に応募することができます。EE-Simツールを使って<b>カスタムの回路設計を数分で作成し</b>、1つのプロファイルで<b>技術サポートをいち早く受けることができます</b>。さらに、カスタマイズ可能なパネルを使って<b>１カ所ですべての情報を見つけることができます</b>。</td>
<td width="198" style="text-align:center;" align="center">
<center>
<img src="http://images.ic.maximintegrated.com/EloquaImages/clients/MaximIntegratedProductsInc/{dbe437de-2c33-4a04-a64c-59741cb0622f}_Wireless-Speaker.gif" style="display:block;" width="190">
</center>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div>
<!--[if gte mso 9]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://ic.maximintegrated.com/FY16_Q1_2015_SEP_ReEngagement_LP_Japanese_MC?utm_source=eloqua&utm_medium=email&utm_content=Enter_Now&utm_campaign=FY16_Q1_2015_SEP_ReEngagement_Japanese_MC
" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="12%" stroke="f" fillcolor="#6e2585">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://ic.maximintegrated.com/FY16_Q1_2015_SEP_ReEngagement_LP_Japanese_MC?utm_campaign=H1%20Thank%20You%201%20-%20MC%20-%20JW%20Test&utm_medium=email&utm_source=Eloqua&utm_source=eloqua&utm_medium=email&utm_content=Enter_Now&utm_campaign=FY16_Q1_2015_SEP_ReEngagement_Japanese_MC
&elq=e734b2e1380b458c974801d66f3f0f90&elqCampaignId=&elqaid=508&elqat=1&elqTrackId=0e27b1ed2bf440979ad85531ba29d364" style="background-color:#6e2585;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">今すぐ応募する ></a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
</div>
</td>
</tr>
</table>
</td>
<td width="20"> </td>
</tr>
</table>
</body>
</html>

Related

The image background can not fit the height of body content container in email template?

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 -->

Images side to side on html

I'm editing a table where I use only 760 width images.
Now I need to put 2x 380 width images side by side, but it ain't working out. Can anyone help? Much appreciated!
I've highlighted the section commenting "I'm having trouble here". Please check.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>TITLE</title>
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
</head>
<body bgcolor="#FFFFFF" style="margin: 0px; padding: 0px; background-color: rgb(255, 255, 255);">
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4;" width="100%">
<tbody>
<tr>
<td align="center"><!-- Header -->
<table border="0" cellpadding="0" cellspacing="0" width="760">
<tbody>
<tr>
<td align="center">
<p style="color: #f4f4f4;font-size:1px;">Hello
</p>
<p align="center" style="color:#777777;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px">Online version
</p>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="760">
<tbody>
<tr>
<td width="760"><a border="0" ><img alt="Banner" border="0" height="224" src="http://www.************" style="display:block;border:0 none" title="Banner" width="760" /> </a></td>
</tr>
</tbody>
</table>
<!-- End Header-->
<table align="center" border="0" cellpadding="0" cellspacing="0" itemscope="" itemtype="http://schema.org/Offer" style="background-color:#FFFFFF;" width="760">
<tbody><!-- Main -->
<tr>
<td align="center" colspan="2">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left"><a border="0" href="htt***************" target="_blank"><img alt="Intro" border="0" src="http://www**********.jpg?1502297240" style="display:block" title="Intro" /> </a></td>
</tr>
<tr>
<td align="left"><a border="0" href="http***************" target="_blank"><img alt="******" border="0" src="http://www*********/3.jpg?1502297240" style="display:block" title="*****" /> </a></td>
</tr>
<tr>
<td align="left"><a border="0" href="http************" target="_blank"><img alt="******" border="0" src="http://www************4.jpg?1502297240" style="display:block" title="****************" /> </a></td>
</tr>
<!--I'M HAVING TROUBLE HERE-->
<tr>
<td align="left"><a border="0" href="*******************" target="_blank"><img alt="LEFT PICTURE" border="0" src="http://www********5.jpg?1502297240" style="display:block" title="LEFT PICTURE" /> </a></td>
</tr>
<tr>
<td align="right"><a border="0" href="https://www***************" target="_blank"><img alt="RIGHT PICTURE" border="0" src="http://www**********6.jpg?1502297240" style="display:block" title="RIGHT PICTURE" /> </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End -->
</tbody>
</table>
<!-- Unsubscribe to anti cancer foundation -->
<table border="0" cellpadding="10" cellspacing="4" height="70" style="margin-bottom:20px;margin-top:20px;" width="504">
<tbody>
<tr>
<td style="background-color:#FFFFFF;border:1px solid #d1d1d1">
<center style="font-family: Arial,Helvetica,sans-serif;font-size:13px;">
<p style="margin:0;color:#444">
<br>
**************</span><br>
<br>
<a href="*******************</a>
</p>
</center>
</td>
</tr>
</tbody>
</table>
<!-- Donations --></td>
</tr>
</tbody>
</table>
<table bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4" width="100%">
<tbody>
<tr>
<td align="center">
<p align="center" style="color:#444444;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><br>**********</br>
<br>************</br><br>**************</br><br>***********</br><br>***********</br><br>***************</br><br>***************</br>
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Also, if you see something that is totally unnecessary, please remove as well.
I'm pretty sure this whole code could be shortened.

use tr, td as below for side by side image
<tr>
<td><img style="float:left;width:380px" ><img style="float:right;width:380px"></td>
</tr>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>TITLE</title>
<html style="opacity: 1;" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
</head>
<body bgcolor="#FFFFFF" style="margin: 0px; padding: 0px; background-color: rgb(255, 255, 255);">
<table bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4;" width="100%">
<tbody>
<tr>
<td align="center"><!-- Header -->
<table border="0" cellpadding="0" cellspacing="0" width="760">
<tbody>
<tr>
<td align="center">
<p style="color: #f4f4f4;font-size:1px;">Hello
</p>
<p align="center" style="color:#777777;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px">Online version
</p>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="760">
<tbody>
<tr>
<td width="760"><a border="0" ><img alt="Banner" border="0" height="224" src="http://www.************" style="display:block;border:0 none" title="Banner" width="760" /> </a></td>
</tr>
</tbody>
</table>
<!-- End Header-->
<table align="center" border="0" cellpadding="0" cellspacing="0" itemscope="" itemtype="http://schema.org/Offer" style="background-color:#FFFFFF;" width="760">
<tbody><!-- Main -->
<tr>
<td align="center" colspan="2">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="left"><a border="0" href="htt***************" target="_blank"><img alt="Intro" border="0" src="http://www**********.jpg?1502297240" style="display:block" title="Intro" /> </a></td>
</tr>
<tr>
<td align="left"><a border="0" href="http***************" target="_blank"><img alt="******" border="0" src="http://www*********/3.jpg?1502297240" style="display:block" title="*****" /> </a></td>
</tr>
<tr>
<td align="left"><a border="0" href="http************" target="_blank"><img alt="******" border="0" src="http://www************4.jpg?1502297240" style="display:block" title="****************" /> </a></td>
</tr>
<!--I'M HAVING TROUBLE HERE-->
<tr>
<td align="center"><a border="0" href="*******************" target="_blank"><img alt="LEFT PICTURE" style="float:left;width:380px" border="0" src="http://www********5.jpg?1502297240" style="display:block" title="LEFT PICTURE" /> </a><a border="0" href="https://www***************" target="_blank"><img alt="RIGHT PICTURE" style="float:right;width:380px" border="0" src="http://www**********6.jpg?1502297240" style="display:block" title="RIGHT PICTURE" /> </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End -->
</tbody>
</table>
<!-- Unsubscribe to anti cancer foundation -->
<table border="0" cellpadding="10" cellspacing="4" height="70" style="margin-bottom:20px;margin-top:20px;" width="504">
<tbody>
<tr>
<td style="background-color:#FFFFFF;border:1px solid #d1d1d1">
<center style="font-family: Arial,Helvetica,sans-serif;font-size:13px;">
<p style="margin:0;color:#444">
<br>
**************</span><br>
<br>
<a href="*******************</a>
</p>
</center>
</td>
</tr>
</tbody>
</table>
<!-- Donations --></td>
</tr>
</tbody>
</table>
<table bgcolor="#f4f4f4" border="0" cellpadding="0" cellspacing="0" style="background-color:#f4f4f4" width="100%">
<tbody>
<tr>
<td align="center">
<p align="center" style="color:#444444;font-size:11px;font-family:Arial,sans-serif;text-align:center;padding:10px"><br>**********</br>
<br>************</br><br>**************</br><br>***********</br><br>***********</br><br>***************</br><br>***************</br>
</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Html table alignment issue in outlook

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.

Arranging <td> in HTML email

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)]>

Block of code with no spacing or indentation

I have received a html block of code (email template so lots of tables) that I have to work with that has no spacing or indentation aand is essentially all on one line. It's a nightmare to try and edit it.
Does anyone know of any online tools or applications that you can copy and paste code into where it organises it for you?
olor="#e5e5e5" alink="#000000" class="yfix" leftmargin="0" rightmargin="0" topmargin="0"> <!--//--> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="100%" valign="top" bgcolor="#e5e5e5" align="center"> <table width="698" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="5"><img hspace="0" height="1" width="5" src="http://info.page7media.ie/img/trans.gif" /></td> <td align="left"> <table width="688" cellspacing="0" cellpadding="0" border="0"> <tr> <td height="10"><a name="top_of_mail"></a></td> </tr> <tr> <td align="center"><font face="Arial, Helvetica, sans-serif" size="2" color="red" style="font-size: 12px; line-height: 17px;">If you are unable to see this message, click <a target="_blank" href="http://info.page7media.ie/u/gm.php?UID=JJ20yz3nz2&ID=279438389_478447_36061" style="text-decoration: underline;"><font face="Arial, Helvetica, sans-seri

Try Dirty Markup, it cleaned this markup up nicely
http://www.dirtymarkup.com/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
olor="#e5e5e5" alink="#000000" class="yfix" leftmargin="0" rightmargin="0"
topmargin="0"> <!--//-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="background-color: #E5E5E5" valign="top"
width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="698">
<tr>
<td width="5"><img height="1" hspace="0" src=
"http://info.page7media.ie/img/trans.gif" width=
"5"></td>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0"
width="688">
<tr>
<td height="10">
<a id="top_of_mail" name=
"top_of_mail"></a>
</td>
</tr>
<tr>
<td align="center">
If you are unable to see this message,
click <a href=
"http://info.page7media.ie/u/gm.php?UID=JJ20yz3nz2&ID=279438389_478447_36061"
style="text-decoration: underline;"
target="_blank"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

You're looking for something called a "beautifier".
Here's an online beautifier that supports HTML: http://ctrlq.org/beautifier/
I beautified it for you but noticed the beginning of your code sample is missing.
olor="#e5e5e5" alink="#000000" class="yfix" leftmargin="0" rightmargin="0" topmargin="0">
<!--//-->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%" valign="top" bgcolor="#e5e5e5" align="center">
<table width="698" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="5">
<img hspace="0" height="1" width="5" src="http://info.page7media.ie/img/trans.gif" />
</td>
<td align="left">
<table width="688" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="10">
<a name="top_of_mail">
</a>
</td>
</tr>
<tr>
<td align="center">
<font face="Arial, Helvetica, sans-serif" size="2" color="red" style="font-size: 12px; line-height: 17px;">
If you are unable to see this message, click
<a target="_blank" href="http://info.page7media.ie/u/gm.php?UID=JJ20yz3nz2&ID=279438389_478447_36061" style="text-decoration: underline;">
<font face="Arial, Helvetica, sans-seri

Use an online code formatter.
http://ctrlq.org/beautifier/
I grabbed the first one that looked interesting. There are others out there.
http://bit.ly/1Eqgeqr