HTML电子邮件表格宽度
更新（工作）代码：HTML电子邮件表格宽度,html,css,html-table,html-email,Html,Css,Html Table,Html Email,更新（工作）代码： max width不是您在元素上设置的属性，它是您在style属性中设置的CSS属性（如果您不制作电子邮件，则在CSS类中设置） 尝试更改 即使在不支持最大宽度CSS的Outlook上，此文本也将居中并限制为580像素 我在Outlook2007中测试了上面的代码，它成功了。此代码来自上面的github链接。max width是一个CSS属性，因此您不能将其用作HTML属性，并且它在Outlook 2007-2013中不起作用，因此请改用width 查看更多信息 您在上面的
max widthstyle
即使在不支持最大宽度CSS的Outlook上，此文本也将居中并限制为580像素
我在Outlook2007中测试了上面的代码，它成功了。此代码来自上面的github链接。
max widthwidth您在上面的面板中使用了一系列折旧样式。
leftmargin=“0”rightmargin=“0”topmargin=“0”marginheight=“0”此外，您还应该阅读CSS支持以及在不同电子邮件客户端中可以使用的内容：
max widthwidth<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=600" />
<title>Talent Academy Newsletter</title>
</head>
</html>
<body width="700" style="width: 100% !important; background-color: #FFF; left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<!--[if mso]>
<center>
<table><tr><td width="700">
<![endif]-->
<table width="100%" align="center" cellpadding="0" cellspacing="0" valign="top" height="auto" style="max-width: 700px!important left-margin:0; right-margin:0; top-margin:0; margin-height:0;"> <!-- // wrapping table // -->
<tr>
<td width="700" align="center" valign="top">
<table width="700" cellpadding="0" cellspacing="0" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td align="center" valign="middle" width="700" style="background-color: #e7e7e7; height: 25; text-align: center; font-size: 10px; font-family: Arial, Helvetica; color: #000;">
<p>Is Outlook ruining this pretty email? Click <strong>here</strong></p> <!--**add link here when on FTP** e.g... <a href="http://www.feverpr.com/client/update/index.html" target="_blank" style="color: #FFF; text-decoration: none;"> -->
</td>
</tr>
<tr>
<td align="center" valign="top" width="700" style="display: block; padding: 0;"> <!-- // welcome banner here // -->
<img src="images/welcome.png" alt="Welcome!" height="340" width="700">
</td>
</tr>
</table>
<table width="470" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;"> <!-- // into copy here // --> <!--be wary of width size here: 470-->
<tr>
<td align="center" valign="top" width="470" style="text-align: center; font-size: 18px; font-family: League Gothic, Arial; color: #000; padding-top: 15px;">
<p>1st edition <br> September 2016</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="470" style="text-align: center; font-size: 15px; font-family: Helvetica, Arial; color: #000; padding: 0px, 115px, 0px, 115px;"> <!--used another td as dif font/size -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra justo sed turpis rutrum, non molestie velit vehicula. Suspendisse sed est nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem odio, viverra eu velit vitae, posuere blandit orci. Integer placerat tempus tortor in pretium. Donec vitae magna et tortor maximus pulvinar vitae et magna. Nam aliquam molestie commodo.</p>
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr width="100%">
<td width="700" align="center" valign="top" width="700" style="display: block; padding-top: 30px; padding-bottom:50px;">
<img src="images/fever.png" alt="Welcome!" height="79" width="79">
<img src="images/nb.png" alt="Welcome!" height="79" width="79">
<img src="images/nbg.png" alt="Welcome!" height="79" width="79">
<img src="images/mw.png" alt="Welcome!" height="79" width="79">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
<img src="images/internal.png" alt="Internal Training" height="85" width="700">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td width="260" valign="top" align="center" style="max-width:260px!important; padding: 40px 63.5px 30px 20px;"> <!-- // bottom two //-->
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/fever2.png" alt="NB" height="35" width="32" align="right">
</td>
<td width="3" style="padding-top: 40px; padding-bottom: 30px;">
<img src="images/line1.png" alt="" height="200" width="3">
</td>
<td width="260" valign="top" align="center" style="padding: 40px 20px 30px 63.5px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/nbg2.png" alt="NB" height="35" width="32" align="right">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td width="260" valign="top" align="center" style="max-width:260px!important; padding: 40px 63.5px 30px 20px;"> <!-- // bottom two //-->
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/fever2.png" alt="NB" height="35" width="32" align="right">
</td>
<td width="3" style="padding-top: 40px; padding-bottom: 30px;">
<img src="images/line1.png" alt="" height="200" width="3">
</td>
<td width="260" valign="top" align="center" style="padding: 40px 20px 30px 63.5px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/nbg2.png" alt="NB" height="35" width="32" align="right">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;"> <!-- // start of external training section // -->
<tr width="700">
<td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
<img src="images/external.png" alt="Internal Training" height="85" width="700"> <!-- // banner image // -->
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td width="260" valign="top" align="center" style="padding: 20px 63.5px 20px 20px;"> <!-- // bottom two //-->
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
</td>
<td width="3" style="padding-top: 10px; padding-bottom: 20px;">
<img src="images/line1.png" alt="" height="200" width="3">
</td>
<td width="260" valign="top" align="center" style="padding: 20px 20px 20px 63.5px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
<img src="images/dare.png" alt="Dare to Share" height="85" width="700"> <!-- // banner image - dare to share section starts here // -->
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td width="380" style="padding: 5px 0px 40px 20px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>PELLENTESQUE HABITANT TRISTIQUE</strong><br>Nam at auctor ante. Integer finibus nisl at euismod iaculis. Proin eleifend nunc ante, hendrerit semper felis pellentesque non. Etiam id quam metus. Ut pretium congue turpis ullamcorper tempus. Vivamus finibus elit ipsum, sit amet egestas dolor condimentum nec.<br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/icon_mail.png" alt="" height="26" width="33" align="left">
<img src="images/icon_web.png" alt="" height="31" width="31" align="left">
</td>
<td width="300" align="left">
<img src="images/circle_right.png" alt="Dare to Share" height="255" width="240" style="padding-bottom: 20px; padding-left: 60px;">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td width="300" align="left">
<img src="images/circle_left.png" alt="Dare to Share" height="255" width="240" style="padding-bottom: 20px; padding-top: 10px;">
</td>
<td width="380" style="padding: 5px 20px 40px 0px;">
<p align="right" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>PELLENTESQUE HABITANT TRISTIQUE</strong><br>Nam at auctor ante. Integer finibus nisl at euismod iaculis. Proin eleifend nunc ante, hendrerit semper felis pellentesque non. Etiam id quam metus. Ut pretium congue turpis ullamcorper tempus. Vivamus finibus elit ipsum, sit amet egestas dolor condimentum nec.<br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/icon_mail.png" alt="" height="26" width="33" align="right">
<img src="images/icon_web.png" alt="" height="31" width="31" align="right">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
<img src="images/firsthand.png" alt="Internal Training" height="85" width="700"> <!-- // banner image // -->
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td width="380" style="padding: 5px 0px 40px 20px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>PELLENTESQUE HABITANT TRISTIQUE</strong><br>Nam at auctor ante. Integer finibus nisl at euismod iaculis. Proin eleifend nunc ante, hendrerit semper felis pellentesque non. Etiam id quam metus. Ut pretium congue turpis ullamcorper tempus. Vivamus finibus elit ipsum, sit amet egestas dolor condimentum nec.<br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
</td>
<td width="300" align="left">
<img src="images/circle_right.png" alt="Dare to Share" height="255" width="240" style="padding-bottom: 20px; padding-left: 60px;">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
<img src="images/useful.png" alt="Internal Training" height="85" width="700"> <!-- // banner image useful stuff // -->
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td width="380" valign="top" align="center" style="max-width:400px!important; padding: 10px 30px 30px 20px;"> <!-- // bottom two //-->
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>TIP OF THE MONTH</strong><br>Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi.</p>
<img src="images/icon_speech.png" alt="" height="48" width="55" align="right" style="padding: 20px 20px 30px 0px;">
</td>
<td width="3" style="padding-top: 10px; padding-bottom: 30px;">
<img src="images/line1.png" alt="" height="150" width="3">
</td>
<td width="217" valign="top" align="center" style="padding: 10px 20px 30px 30px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>USEFUL LINKS</strong><br>euismod.com<br>placerat.com<br>nullam.co.uk<br>efficitur.com</p>
<img src="images/icon_comp.png" alt="NB" height="48" width="50" align="right" style="padding: 20px 20px, 30px 0px;">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr width="100%">
<td width="700" align="center" valign="top" width="700" style="display: block;">
<img src="images/icon_facebook.png" alt="" height="24" width="15" style="padding: 10px 10px 0px 10px;">
<img src="images/icon_insta.png" alt="" height="24" width="26" style="padding: 10px 10px 0px 10px;">
<img src="images/icon_twitter.jpg" alt="" height="24" width="30" style="padding: 10px 10px 0px 10px;">
</td>
</tr>
</table>
<table width="470" cellpadding="0" cellspacing="0" align="center" valign="top" height="auto" style="left-margin:0; right-margin:0; top-margin:0; margin-height:0;">
<tr>
<td align="center" valign="top" width="470" >
<p style="text-align: center; font-size: 12px; font-family: Helvetica, Arial; padding: 0px, 115px, 0px, 115px;"><a href="mailto:charlotte.naish@nelsonbostockunlimited.com?Subject=Talent%20Academy" style="color: #000!important; text-decoration: none;"><strong>charlotte.naish@nelsonbostockunlimited.com</strong></p>
</td>
</tr>
</table>
<!--[if mso]>
<center>
<table><tr><td width="700">
<![endif]-->
</td>
</tr>
</table>
</body>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=600" />
<title>Talent Academy Newsletter</title>
</head>
</html>
<body leftmargin="0" rightmargin="0" topmargin="0" marginheight="0" style="width: 100% !important; background-color: #FFF; margin:0!important;">
<table max-width="700" align="center" cellpadding="0" cellspacing="0" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0"> <!-- // wrapping table // -->
<tr>
<td width="700" align="center" valign="top">
<table width="700" cellpadding="0" cellspacing="0"><!-- // not displaying properly & welcome banner table // -->
<tr>
<td align="center" valign="middle" width="700" style="background-color: #e7e7e7; height: 25; text-align: center; font-size: 10px; font-family: Arial, Helvetica; color: #000;">
<p>Is Outlook ruining this pretty email? Click <strong>here</strong></p> <!--**add link here when on FTP**-->
</td>
</tr>
<tr>
<td align="center" valign="top" width="700" style="display: block; padding: 0;"> <!-- // welcome banner here // -->
<img src="images/welcome.png" alt="Welcome!" height="340" width="700">
</td>
</tr>
</table>
<table width="470" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0"> <!-- // into copy here // --> <!--be wary of width size here: 470-->
<tr>
<td align="center" valign="top" width="470" style="text-align: center; font-size: 18px; font-family: League Gothic, Arial; color: #000; padding-top: 15px;">
<p>1st edition <br> September 2016</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="470" style="text-align: center; font-size: 15px; font-family: Helvetica, Arial; color: #000; padding: 0px, 115px, 0px, 115px;"> <!--used another td as dif font/size -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pharetra justo sed turpis rutrum, non molestie velit vehicula. Suspendisse sed est nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sem odio, viverra eu velit vitae, posuere blandit orci. Integer placerat tempus tortor in pretium. Donec vitae magna et tortor maximus pulvinar vitae et magna. Nam aliquam molestie commodo.</p>
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0">
<tr max-width="700">
<td max-width="700" align="center" valign="top" width="700" style="display: block; padding-top: 30px; padding-bottom:50px;">
<img src="images/fever.png" alt="Welcome!" height="79" width="79">
<img src="images/nb.png" alt="Welcome!" height="79" width="79">
<img src="images/nbg.png" alt="Welcome!" height="79" width="79">
<img src="images/mw.png" alt="Welcome!" height="79" width="79">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0">
<tr>
<td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
<img src="images/internal.png" alt="Internal Training" height="85" width="700">
</td>
</tr>
<tr max-width="700">
<td width="260" style="display: inline-block; padding: 40px 63.5px 30px 20px;"> <!-- // bottom two //-->
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/fever2.png" alt="NB" height="35" width="32" align="right">
</td>
</td>
<td width="3" style="display: inline-block; padding-top: 40px; padding-bottom: 30px;">
<img src="images/line1.png" alt="" height="200" width="3">
</td>
<td width="260" style="display: inline-block; padding: 40px 20px 30px 63.5px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/nbg2.png" alt="NB" height="35" width="32" align="right">
</td>
</tr>
<tr max-width="700">
<td width="260" style="display: inline-block; padding: 40px 63.5px 30px 20px;"> <!-- // bottom two //-->
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/fever2.png" alt="NB" height="35" width="32" align="right">
</td>
</td>
<td width="3" style="display: inline-block; padding-top: 40px; padding-bottom: 30px;">
<img src="images/line1.png" alt="" height="200" width="3">
</td>
<td width="260" style="display: inline-block; padding: 40px 20px 30px 63.5px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/mw2.png" alt="NB" height="35" width="32" align="right">
<img src="images/nbg2.png" alt="NB" height="35" width="32" align="right">
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0"> <!-- // start of external training section // -->
<tr max-width="700">
<td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
<img src="images/external.png" alt="Internal Training" height="85" width="700"> <!-- // banner image // -->
</td>
</tr>
<tr max-width="700">
<td width="260" style="display: inline-block; padding: 5px 63.5px 30px 20px;"> <!-- // bottom two //-->
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
</td>
<td width="3" style="display: inline-block; padding-top: 5px; padding-bottom: 30px;">
<img src="images/line1.png" alt="" height="150" width="3">
</td>
<td width="260" style="display: inline-block; padding: 5px 20px 30px 63.5px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>NAME:</strong> Training course 1 <br><strong>DESCRIPTION:</strong> Nunc ac enim vel nulla euismod placerat a sit amet ligula. Nullam eu ante tempus, efficitur dui eu, pulvinar nisi. <br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
</td>
</tr>
</table>
<table width="700" cellpadding="0" cellspacing="0" align="center" leftmargin="0" rightmargin="0" topmargin="0" marginheight="0">
<tr>
<td width="700" valign="top" align="center" style="padding: 10px 0px 30px 0px;">
<img src="images/dare.png" alt="Internal Training" height="85" width="700"> <!-- // banner image // -->
</td>
</tr>
<tr>
<td width="380" style="display: inline-block; padding: 5px 0px 30px 20px;">
<p align="left" style="font-size: 15px; font-family: Helvetica, Arial; color: #000;"><strong>PELLENTESQUE HABITANT TRISTIQUE</strong><br>Nam at auctor ante. Integer finibus nisl at euismod iaculis. Proin eleifend nunc ante, hendrerit semper felis pellentesque non. Etiam id quam metus. Ut pretium congue turpis ullamcorper tempus. Vivamus finibus elit ipsum, sit amet egestas dolor condimentum nec.<br><strong>DATE:</strong> 01.01.2017 <br><strong>LOCATION:</strong> Neverland</p>
<img src="images/icon_mail.png" alt="" height="26" width="33">
<img src="images/icon_web.png" alt="" height="31" width="31">
</td>
<td max-width="300" style="display: inline-block; padding: 0px 0px 0px 60px">
<img src="images/circle_right.png" alt="Dare to Share" height="255" width="240">
</td>
</tr>
<tr>
<!-- artwork the circle to reflect the one above -->
</tr>
</table>
</td>
</tr>
</table>
</body>
<!--[if mso]>
<center>
<table><tr><td width="580">
<![endif]-->
<div style="max-width:580px; margin:0 auto;">
<p>This text will be centered and constrained to 580 pixels even on Outlook which does not support max-width CSS</p>
</div>
<!--[if mso]>
</td></tr></table>
</center>
<![endif]-->