Hello

Right now i am designing a email for my company. With a lot of struggling it works in every email client also in the gmail app for android.
But I have tested it in the gmail app for iOS and there it looks messed up.
My Question is:

What i am doing wrong? and What is the solution?

Below the Screenshots:

Gmail app for IOS:
Ios1
Ios2

Gmail app for Android:
android 1
android 2

And the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <title>EasySwitch</title>
   <style type="text/css">
   /* Client-specific Styles */
   #outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
   body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;}
   /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */
   .ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
   .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
   #backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
   img {outline:none; text-decoration:none;border:none; -ms-interpolation-mode: bicubic;}
   a img {border:none;}
   .image_fix {display:block;}
   p {margin: 0px 0px !important;}
   table td {border-collapse: collapse;}
   table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
   a {color: #33b9ff;text-decoration: none;text-decoration:none!important;}
   /*STYLES*/
   table[class=full] { width: 100%; clear: both; }
   /*IPAD STYLES*/
   @media only screen and (max-width: 640px) {
      a[href^="tel"], a[href^="sms"] {
         text-decoration: none;
         color: #0a8cce; /* or whatever your want */
         pointer-events: none;
         cursor: default;
      }
      .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
         text-decoration: default;
         color: #0a8cce !important;
         pointer-events: auto;
         cursor: default;
      }
      table[class=devicewidth] {width: 440px!important;text-align:center!important;}
      table[class=devicewidthmob] {width: 420px!important;text-align:center!important;}
      table[class=devicewidthinner] {width: 420px!important;text-align:center!important;}
      img[class=banner] {width: 440px!important;height:157px!important;}
      img[class=col2img] {width: 440px!important;height:330px!important;}
      table[class="cols3inner"] {width: 100px!important;}
      table[class="col3img"] {width: 131px!important; margin-left: 20px;}
      img[class="col3img"] {width: 131px!important;height: 82px!important;}
      table[class='removeMobile']{width:10px!important;}
      img[class="blog"] {width: 420px!important;height: 162px!important;}
   }


   /*IPHONE STYLES*/
   @media only screen and (max-width: 480px) {
      a[href^="tel"], a[href^="sms"] {
         text-decoration: none;
         color: #0a8cce; /* or whatever your want */
         pointer-events: none;
         cursor: default;
      }

      .logo{
         padding-left: 0!important;
      }
      .callbutton{
         width: 40px;
         height: 40px;
         margin-left: -50px;
         margin-top: 20px;

      }
      .mobile_link a[href^="tel"], .mobile_link a[href^="sms"] {
         text-decoration: default;
         color: #0a8cce !important; 
         pointer-events: auto;
         cursor: default;
      }
      table[class=devicewidth] {width: 300px!important;text-align:center!important;}
      table[class=devicewidthmob] {width: 260px!important;text-align:center!important;}
      table[class=devicewidthinner] {width: 260px!important;text-align:center!important;}
      img[class=banner] {width: 300px!important;height:100px!important;}
      img[class=col2img] {width: 300px!important;height:210px!important;}
      table[class="cols3inner"] {width: 260px!important;}
      img[class="col3img"] {width: 300px!important;height: 175px!important;}
      table[class="col3img"] {width: 300px!important;}
      img[class="blog"] {width: 300px!important;height: 100px!important;}
      td[class="padding-top-right15"]{padding:15px 15px 0 0 !important;}
      td[class="padding-right15"]{padding-right:15px !important;}

   }
   @media screen and (min-width: 480px) {


      .pijl{
         display: inline !important;
         width: 132px !important;
         height: 61px !important;
      }

      .right {
         width: 20%;
         margin-top: 30px;
      }
      .callbutton {
         display: none;
      }
      .calldesktop {
         display: block !important; float: right; text-align: right; font-size: 14px;  margin-right: 10px !important;   line-height:100% !important;
         margin-top:20px;
         margin-left: 10px;

      }

      .calldesktop > .klantenservice{
         width: 50px !important;
         height: 50px !important;
      }

      .nummer{
         padding-top: 20px;
         font-family: arial;


      }

      .logo{
         padding-left:40px;


      }

      .nummer p{
         font-size:12px !important;
      }

      .nummer p b{
         font-size:14px !important;
      }
      .button {
         margin-top: 65px;
      }
      .header p {
         font-size: 30px; line-height: 35px;
      }
      .top3img img {
         width: 75%; margin-left: 10px;
      }

      *[class="callbutton"] {
         overflow:hidden !important; 
         float:left !important;
         display:none !important; 
         line-height:0px !important;
         width: 10% !important;
      }





   }

   /*tridown*/
   .tri-down:before {
      content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-color: transparent; border-bottom: 0;
   }
   .tri-down:after {
      content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-color: transparent; border-bottom: 0;
   }
   .tri-down:before {
      bottom: -16px; border-top-color: #777; border-width: 16px;
   }
   .tri-down:after {
      bottom: -15px; border-top-color: #fff; border-width: 15px;
   }
   .tri-down-deal:before {
      content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-color: transparent; border-bottom: 0;
   }
   .tri-down-deal:after {
      content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); width: 0; height: 0; border-style: solid; border-color: transparent; border-bottom: 0;
   }
   .tri-down-deal:before {
      bottom: -16px; border-top-color: #777; border-width: 16px;
   }
   .tri-down-deal:after {
      bottom: -15px; border-top-color: #f6f6f6; border-width: 15px;
   }
   </style>
</head>
<body align="center">   


<!-- fulltext -->
<table width="100%" bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
   <tbody>
      <tr>
         <td>
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table bgcolor="#ededed" width="600" cellpadding="0" cellspacing="0" border="0" align="left" class="devicewidth">
                           <tbody>

                              <tr>
                                 <td>
                                    <table>
                                       <tr>
                                          <td class="logo" width="600" align="center" style="font-size:12px; font-family:arial;">
                                             Is het niet goed leesbaar? Klik  
                                    <a href="https://www.easyswitch.nl" target="_blank" style="text-decoration: none; color: #000;">hier</a> voor de webversie
                                          </td>





                                    </tr> 
                                 </table>
                              </td>
                           </tr>


                        </tbody>
                     </table>
                  </td>
               </tr>
            </tbody>
         </table>
      </td>
   </tr>
</tbody>
</table>
<!-- end of fulltext -->
<!-- fulltext -->
<table width="100%" bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
   <tbody>
      <tr>
         <td>
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table bgcolor="#ededed" width="600" cellpadding="0" cellspacing="0" border="0" align="left" class="devicewidth">
                           <tbody>

                              <tr>
                                 <td>
                                    <table>
                                       <tr>
                                          <td class="logo" width="300">
                                             <img src="https://www.easyswitch.nl/assets/mail-logoes.png" style="width:200px;  padding-top:20px;"/>
                                          </td>



                                          <td class="calldesktop" style=" width:50px; overflow:hidden; display:none; line-height:0px; font-family: arial; mso-hide: all; ">
                                           <img  class="klantenservice" src="https://www.easyswitch.nl/assets/mail-klantenservice.png" style="float:left; width:0; height:0;"/>
                                        </td>
                                        <td class="nummer" style=" width:200px; text-align:right; padding-right:20px; ">
                                           <p style="margin: 0;font-size: 0;">Hulp nodig? <b style="font-size: 0;">020 - 760 42 42</b></p>
                                           <p style="margin: 0; font-size: 0;">Bereikbaar ma. - vr. 9:00 - 17:00</p>
                                        </td>
                                        <td>
                                          <img class="callbutton" src="https://www.easyswitch.nl/assets/mail-phone1.png"  style="display:block;"/>
                                       </td>
                                    </tr> 
                                 </table>
                              </td>
                           </tr>
                           <!-- Spacing -->
                           <tr>
                              <td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                           </tr>
                           <!-- Spacing -->

                        </tbody>
                     </table>
                  </td>
               </tr>
            </tbody>
         </table>
      </td>
   </tr>
</tbody>
</table>
<!-- end of fulltext -->

<!-- fulltext -->
<table width="100%" bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
   <tbody>
      <tr>
         <td>
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table bgcolor="#258cd5" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                           <tbody>
                              <!-- Spacing -->
                              <tr>
                                 <td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>
                              <!-- Spacing -->
                              <tr>
                                 <td>
                                    <table width="510" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidthinner">
                                       <tbody>
                                          <tr>
                                             <td  style="font-family:  arial, sans-serif; font-size: 24px; color: #ffffff; text-align:left; line-height: 24px; padding-top:20px; padding-left:5px; padding-right:5px;">
                                                Kies de laagste tarieven en bespaar tot €250,-
                                             </td>
                                          </tr>
                                          <!-- Spacing -->
                                          <tr>
                                             <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                          </tr>
                                          <!-- /Spacing -->


                                       </tbody>
                                    </table>
                                 </td>
                              </tr>
                              <!-- Spacing -->
                              <tr>
                                 <td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>
                              <!-- Spacing -->

                           </tbody>
                        </table>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- end of fulltext -->

<!-- fulltext -->
<table width="100%" bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
   <tbody>
      <tr>
         <td>
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                           <tbody>
                              <!-- Spacing -->
                              <tr>
                                 <td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>
                              <!-- Spacing -->
                              <tr>
                                 <td>
                                    <table width="510" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidthinner">
                                       <tbody>

                                          <tr>
                                             <td style="font-family:  arial, sans-serif; font-size: 18px; font-weight:bold; color: #000000; text-align:left; line-height: 24px; padding-left:5px;padding-right:5px;">
                                                Geachte heer de Boer,
                                             </td>
                                          </tr>
                                          <!-- Spacing -->
                                          <tr>
                                             <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                          </tr>
                                          <!-- /Spacing -->
                                          <!-- content -->
                                          <tr>
                                             <td style="font-family:  arial, sans-serif; font-size: 14px; color: #666666; text-align:left; line-height: 24px; padding-left:5px;padding-right:5px;">
                                                Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent laoreet malesuada cursus. Maecenas scelerisque congue eros eu posuere. Praesent in felis ut velit pretium lobortis rhoncus ut erat.


                                             </td>
                                          </tr>

                                          <!-- end of content -->
                                          <!-- Spacing -->
                                          <tr>
                                             <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                          </tr>
                                          <!-- /Spacing -->



                                       </tbody>
                                    </table>
                                 </td>
                              </tr>
                              <!-- Spacing -->
                              <tr>
                                 <td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                              </tr>
                              <!-- Spacing -->

                           </tbody>
                        </table>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- end of fulltext -->


<!-- leftimage -->
<table width="100%" bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
   <tbody>

      <tr>
         <td>
            <table bgcolor="#ededed"width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                           <tbody>

                              <tr>
                                 <td>
                                    <table bgcolor="#ededed" width="550" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                                       <tbody>

                                          <tr>
                                             <td style="padding: 0;">
                                                <div class="tri-down" style="position: relative; border-bottom-style: solid; border-bottom-color: #999; border-bottom-width: 1px; background: #fff; padding: 1em;margin-bottom:40px;"></div>
                                             </td>
                                          </tr>
                                          <tr>
                                             <td>
                                                <!-- Start of left column -->
                                                <table width="260" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthmob" style="margin-left:20px;">
                                                   <tbody>
                                                      <tr>
                                                         <td style="font-family: arial, sans-serif; font-size: 18px; color: #2d2a26; text-align:left; line-height: 24px; margin-top:20px;" class="padding-top-right15">
                                                            <p class="h2" style="font-size: 18px; font-weight: bold; margin: 12px 0 12px; padding-left:5px;">Uw beste deal op dit moment!</p>
                                                         </td>
                                                      </tr>
                                                      <!-- end of title -->

                                                      <!-- content -->
                                                      <tr>
                                                         <td style="font-family: arial, sans-serif; font-size: 14px; color: #000000; text-align:left; line-height: 50px; padding-top: 20px; padding-top2" class="padding-right15">

                                                            <p class="prijsdeal" style="font-size: 50px; font-weight: bold; margin: 0; padding-left:5px;">€50,25<sup style="font-size: 14px; font-weight: lighter;">   per maand</sup></p>
                                                            <p class="prijsyear" style="font-size: 20px; font-weight: bold; color: #666; line-height: 30px; margin: 0;padding-left:5px;">€603,-<sup style="font-size: 12px; font-weight: lighter;">   per jaar</sup></p>

                                                         </td>
                                                      </tr>
                                                      <!-- Spacing -->
                                                      <tr>
                                                         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                      </tr>
                                                      <!-- /Spacing -->


                                                      <!-- end of content -->
                                                   </tbody>
                                                </table>
                                                <!-- end of left column -->
                                                <!-- spacing for mobile devices-->
                                                <table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">
                                                   <tbody>
                                                      <tr>
                                                         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                      </tr>
                                                   </tbody>
                                                </table>
                                                <!-- end of for mobile devices-->
                                                <!-- start of right column -->
                                                <table width="230" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthmob" style="margin-left:20px;">
                                                   <tbody>
                                                      <tr>
                                                         <td style="font-family: arial, sans-serif; font-size: 18px; color: #2d2a26; text-align:left; line-height: 24px;" class="padding-top-right15">
                                                            <p class="h2" style="font-size: 18px; font-weight: bold; margin: 12px 0 12px; ">Aangeboden door:</p>
                                                         </td>
                                                      </tr>
                                                      <!-- end of title -->
                                                      <!-- Spacing -->
                                                      <tr>
                                                         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                      </tr>
                                                      <!-- /Spacing -->
                                                      <!-- content -->
                                                      <tr>
                                                         <td style="font-family: arial, sans-serif; font-size: 14px; color: #000000; text-align:left; line-height: 24px;" class="padding-right15">
                                                          <img class="dealimg" src="https://www.easyswitch.nl/assets/mail-oxxio.png" width="112px" alt="" style=" display:block; height: auto;  border: 0;" />
                                                       </td>
                                                    </tr>
                                                    <!-- Spacing -->
                                                    <tr>
                                                      <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                   </tr>
                                                   <!-- /Spacing -->
                                                   <!-- image/Button -->
                                                   <tr>
                                                      <td width="260" height="39" align="left" class="devicewidth">
                                                        <table cellspacing="0" cellpadding="0" style="padding-bottom:10px;"> 
                                                         <tr> 
                                                            <td align="center" width="200" height="40" bgcolor="#ff8a2c" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
                                                               <a href="https://www.easyswitch.nl/" style="font-size:16px; font-family: Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
                                                                  <span style="color: #FFFFFF">Bekijk het product</span></a>
                                                               </td> 
                                                            </tr> 
                                                         </table>
                                                      </td>
                                                   </tr>
                                                   <!-- /image/Button -->

                                                   <!-- end of content -->
                                                </tbody>
                                             </table>
                                             <!-- end of right column -->

                                             <table bgcolor="ededed"class="outer" align="center" style="border-spacing: 0; font-family: arial; color: #333333; width: 100%; max-width: 600px; margin: 0 auto;">

                                                <tr class="arrow-row" >
                                                   <td style="text-align: center;   padding: 0;  padding-bottom: 10px;  mso-hide: all;" align="center">
                                                      <img class="pijl" src="https://www.easyswitch.nl/assets/mail-pijl.png"   alt="" style="display:none; width:0; height:0;" />
                                                   </td>
                                                </tr>
                                             </table>
                                          </td>
                                       </tr>
                                    </tbody>
                                 </table>
                              </td>
                           </tr>

                        </tbody>
                     </table>
                  </td>
               </tr>
            </tbody>
         </table>
      </td>
   </tr>
</tbody>
</table>
<!-- end of left image -->

<!-- leftimage -->
<table width="100%" bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
   <tbody>
      <tr>
         <td>
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" >
                           <tbody>

                              <tr>
                                 <td>
                                    <table  bgcolor="#f6f6f6" width="550" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" >
                                       <tbody>
                                          <tr>
                                             <td>

                                              <!-- Start of left column -->
                                              <table width="550" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                                <tbody>
                                                   <!-- image -->
                                                   <tr>
                                                      <td width="550" align="left" class="devicewidth">

                                                         <p class="h2" style="font-size: 18px; font-weight: bold; font-family:arial; margin: 12px 0 12px; padding-left:20px;padding-top:20px;">Uw gegevens</p>

                                                      </td>
                                                   </tr>
                                                   <!-- /image -->
                                                </tbody>
                                             </table>
                                             <!-- end of left column -->

                                          </td>
                                       </tr>

                                    </tbody>
                                 </table>

                              </td>
                           </tr>



                        </tbody>
                     </table>
                  </td>
               </tr>

            </tbody>
         </table>
      </td>
   </tr>
</tbody>
</table>
<!-- end of left image -->
<!-- leftimage -->
<table width="100%" bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
   <tbody>
      <tr>
         <td>
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" >
                           <tbody>

                              <tr>
                                 <td>
                                    <table  bgcolor="#f6f6f6" width="550" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth" >
                                       <tbody>
                                          <tr>
                                             <td>



                                                <!-- Start of left column -->
                                                <table width="180" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                                   <tbody>
                                                      <!-- image -->
                                                      <tr>
                                                         <td width="160"  align="left" class="devicewidth" style="padding:20px; font-family:arial;font-size:14px; line-height: 20px;">

                                                           <p>Bloemen 166</p>
                                                           <p>1902 MC Castricum</p>

                                                        </td>
                                                     </tr>
                                                     <!-- /image -->
                                                  </tbody>
                                               </table>
                                               <!-- end of left column -->

                                               <!-- Start of left column -->
                                               <table width="190" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                                <tbody>
                                                   <!-- image -->
                                                   <tr>
                                                      <td width="170"  align="left" class="devicewidth" style="padding:20px;font-family:arial;font-size:14px;line-height: 20px;">

                                                         <p>Stroom: 1500 kWh p/j</p>
                                                         <p>Gas: 1000 m3 p/j</p>

                                                      </td>
                                                   </tr>
                                                   <!-- /image -->
                                                </tbody>
                                             </table>
                                             <!-- end of left column -->

                                             <!-- Start of left column -->
                                             <table width="170" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                                <tbody>
                                                   <!-- image -->
                                                   <tr>
                                                      <td width="160"  align="left" class="devicewidth" style="padding:20px;font-family:arial;font-size:14px;">
                                                        <a>
                                                         Gegevens wijzigen
                                                      </a>
                                                   </td>
                                                </tr>
                                                <!-- /image -->
                                             </tbody>
                                          </table>
                                          <tr>
                                             <td style="padding: 0;" bgcolor="#ffffff">
                                                <div class="tri-down-deal" style="position: relative; margin-bottom: 2em; border-bottom-color: #999; border-bottom-width: 1px; border-bottom-style: solid; background: #fff;"></div>
                                             </td>
                                          </tr>
                                          <!-- end of left column -->

                                       </td>
                                    </tr>

                                 </tbody>
                              </table>

                           </td>
                        </tr>



                     </tbody>
                  </table>
               </td>
            </tr>

         </tbody>
      </table>
   </td>
</tr>
</tbody>
</table>
<!-- end of left image -->
<!-- leftimage -->
<table width="100%" bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
   <tbody>

      <tr>
         <td>
            <table bgcolor="#ededed"width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                           <tbody>

                              <tr>
                                 <td>
                                    <table bgcolor="#ffffff" width="550" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                                       <tbody>

                                          <tr>
                                             <td>
                                                <!-- Start of left column -->
                                                <table width="260" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthmob" style="margin-left:20px;">
                                                   <tbody>
                                                      <tr>
                                                         <td style="font-family: arial, sans-serif; font-size: 18px; color: #2d2a26; text-align:left; line-height: 24px; margin-top:20px;" class="padding-top-right15">
                                                            <p class="h2" style="font-size: 18px; font-weight: bold; margin: 12px 0 12px;">Top 3</p>
                                                         </td>
                                                      </tr>
                                                      <!-- end of title -->

                                                      <!-- content -->
                                                      <tr>
                                                         <td style="font-family: arial, sans-serif; font-size: 14px; color: #000000; text-align:left;  padding-top2" class="padding-right15">
                                                            <!-- Begin Top3 -->
                                                            <table class="contents" style="border-spacing: 0; font-family: arial; color: #333333; width: 100%; font-size: 14px; text-align: left;">
                                                               <tr>
                                                                  <td class="text" style="padding: 10px 0 0;">
                                                                     <tr>
                                                                        <td style="border-bottom-width: 1px; border-bottom-color: #ededed; border-bottom-style: solid; font-size: 18px; padding: 0;" class="top3">1</td>
                                                                        <td style="border-bottom-width: 1px; border-bottom-color: #ededed; border-bottom-style: solid; padding: 0;" class="top3img"><img src="https://www.easyswitch.nl/assets/mail-oxxio.png"  width="112px" alt="" style="display:block; width: 112px; height: auto; margin: 20px 10px 10px 20px; border: 0;" /></td> 
                                                                        <td style="border-bottom-width: 1px; border-bottom-color: #ededed; border-bottom-style: solid; width: 100px; font-size: 18px; font-weight: bold; padding: 0;" class="price">                                  
                                                                           <p style="margin: 0;">€ 90,67<sup> p/m</sup></p>
                                                                           <p class="price2" style="font-size: 14px; font-weight: lighter; color: #666666; margin: 0;">€ 90,67<sup> p/jr</sup></p>
                                                                        </td> 
                                                                     </tr>
                                                                     <tr style="border-bottom-width: 1px; border-bottom-color: black; border-bottom-style: solid;"><td style="border-bottom-width: 1px; border-bottom-color: #ededed; border-bottom-style: solid; font-size: 18px; padding: 0;" class="top3">2</td>
                                                                        <td style="border-bottom-width: 1px; border-bottom-color: #ededed; border-bottom-style: solid; padding: 0;" class="top3img"><img src="https://www.easyswitch.nl/assets/mail-nuon.png" width="112px" alt="" style="display:block; height: auto; margin: 20px 10px 10px 20px; border: 0;" /></td>
                                                                        <td style="border-bottom-width: 1px; border-bottom-color: #ededed; border-bottom-style: solid; width: 100px; font-size: 18px; font-weight: bold; padding: 0;" class="price">
                                                                           <p style="margin: 0;">€ 91,09<sup> p/m</sup></p>
                                                                           <p class="price2" style="font-size: 14px; font-weight: lighter; color: #666666; margin: 0;">€ 90,67<sup> p/jr</sup></p>
                                                                        </td>  
                                                                     </tr>
                                                                     <tr>
                                                                        <td class="top3" style="font-size: 18px; padding: 0;">3</td>
                                                                        <td class="top3img" style="padding: 0;">
                                                                           <img src="https://www.easyswitch.nl/assets/mail-eon.png"  width="112px" alt="" style="display:block; height: auto; margin: 20px 10px 10px 20px; border: 0;" />
                                                                        </td>
                                                                        <td class="price" style="width: 100px; font-size: 18px; font-weight: bold; padding: 0;">
                                                                           <p style="margin: 0;">€ 91,41<sup> p/m</sup></p>
                                                                           <p class="price2" style="font-size: 14px; font-weight: lighter; color: #666666; margin: 0;">€ 90,67<sup> p/jr</sup></p>
                                                                        </td> 
                                                                     </tr>

                                                                  </td>
                                                               </tr>
                                                            </table>
                                                            <!-- Eind top 3 -->

                                                         </td>
                                                      </tr>
                                                      <!-- Spacing -->
                                                      <tr>
                                                         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                      </tr>
                                                      <!-- /Spacing -->


                                                      <!-- end of content -->
                                                   </tbody>
                                                </table>
                                                <!-- end of left column -->
                                                <!-- spacing for mobile devices-->
                                                <table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">
                                                   <tbody>
                                                      <tr>
                                                         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                      </tr>
                                                   </tbody>
                                                </table>
                                                <!-- end of for mobile devices-->
                                                <!-- start of right column -->
                                                <table width="230" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidthmob" style="margin-left:20px;">
                                                   <tbody>
                                                      <tr>
                                                         <td style="font-family: arial, sans-serif; font-size: 18px; color: #2d2a26; text-align:left; line-height: 24px;" class="padding-top-right15">
                                                            <p class="h2" style="font-size: 18px; font-weight: bold; margin: 12px 0 12px;">Waarom EasySwitch?</p>
                                                         </td>
                                                      </tr>
                                                      <!-- end of title -->
                                                      <!-- Spacing -->
                                                      <tr>
                                                         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                      </tr>
                                                      <!-- /Spacing -->
                                                      <!-- content -->
                                                      <tr>
                                                         <td style="font-family: arial, sans-serif; font-size: 14px; color: #000000; text-align:left; line-height: 24px;" class="padding-right15">
                                                            <ul style="list-style: url('https://www.easyswitch.nl/assets/mail-check.png');">
                                       <li style="margin-bottom: 30px;">"Onafhankelijke en betrouwbaar vergelijken"</li>
                                       <li style="margin-bottom: 30px;">"Altijd goedkoper dan bij de leverancier"</li>
                                       <li style="margin-bottom: 30px;">"Exclusieve actiekortingen"</li>
                                       <li style="margin-bottom: 30px;">"Geen verborgen kosten"</li>
                                    </ul>

                                                         </td>
                                                      </tr>
                                                      <!-- Spacing -->
                                                      <tr>
                                                         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                      </tr>
                                                      <!-- /Spacing -->


                                                      <!-- end of content -->
                                                   </tbody>
                                                </table>
                                                <!-- end of right column -->


                                             </td>
                                          </tr>
                                       </tbody>
                                    </table>
                                 </td>
                              </tr>

                           </tbody>
                        </table>
                     </td>
                  </tr>
               </tbody>
            </table>
         </td>
      </tr>
   </tbody>
</table>
<!-- end of left image -->

<!-- leftimage -->
<table width="100%" bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="left-image">
   <tbody>
      <tr>
         <td>
            <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
               <tbody>
                  <tr>
                     <td width="100%">
                        <table bgcolor="#ffffff" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                           <tbody>

                              <tr>
                                 <td>
                                    <table bgcolor="#ededed" width="550" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                                       <tbody>
                                          <tr>
                                             <td>
                                                <!-- Start of left column -->
                                                <table width="270" align="left" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                                   <tbody>
                                                      <!-- image -->
                                                      <tr>
                                                         <td width="251" height="10" align="center" class="devicewidth" style="padding-top:35px; padding-left:20px;font-family:arial; font-size:14px; color: #666666; ">
                                                          Wij regelen altijd de beste deal voor uw!
                                                       </td>
                                                    </tr>
                                                    <!-- /image -->
                                                 </tbody>
                                              </table>
                                              <!-- end of left column -->
                                              <!-- spacing for mobile devices-->
 <!--                                                <table align="left" border="0" cellpadding="0" cellspacing="0" class="mobilespacing">
                                                   <tbody>
                                                      <tr>
                                                         <td width="100%" height="15" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                                      </tr>
                                                   </tbody>
                                                </table> -->
                                                <!-- end of for mobile devices-->
                                                <!-- Start of left column -->
                                                <table width="251" align="center" border="0" cellpadding="0" cellspacing="0" class="devicewidth">
                                                   <tbody>
                                                      <!-- image -->
                                                      <tr>
                                                         <td width="230" height="70" align="center" class="devicewidth">
                                                            <table cellspacing="0" cellpadding="0"> 
                                                               <tr> 
                                                                  <td align="center" width="200" height="40" bgcolor="#ff8a2c" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
                                                                     <a href="https://www.easyswitch.nl/" style="font-size:16px; font-family: Arial, sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
                                                                        <span style="color: #FFFFFF">Vergelijk nu!</span></a>
                                                                     </td> 
                                                                  </tr> 
                                                               </table>
                                                            </td>
                                                         </tr>
                                                         <!-- /image -->
                                                         <!-- image -->
                                                         <tr>
                                                            <td width="251" align="center" class="devicewidth" style="padding-bottom:10px; font-family:arial; font-size:12px; color: #666666;">
                                                               <i>Goedkoper dan bij de leverancier!</i>
                                                            </td>
                                                         </tr>
                                                         <!-- /image -->
                                                      </tbody>
                                                   </table>
                                                   <!-- end of left column -->
                                                </td>
                                             </tr>
                                          </tbody>
                                       </table>
                                    </td>
                                 </tr>
                                 <!-- Spacing -->
                                 <tr>
                                    <td height="20" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                 </tr>
                                 <!-- Spacing -->
                                 <!-- Spacing -->
                                 <tr>
                                    <td height="5" bgcolor="#ffffff" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;">&nbsp;</td>
                                 </tr>
                                 <!-- Spacing -->
                              </tbody>
                           </table>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>
   <!-- end of left image -->
   <!-- Start of postfooter -->
   <table width="100%" bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0" id="backgroundTable" st-sortable="preheader" >
      <tbody>
         <tr>
            <td>
               <table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                  <tbody>
                     <tr>
                        <td width="100%">
                           <table bgcolor="#ededed" width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth">
                              <tbody>
                                 <!-- Spacing -->
                                 <tr>
                                    <td width="100%" height="10"></td>
                                 </tr>
                                 <!-- Spacing -->
                                 <tr>
                                    <td align="center" valign="middle" style="font-family: arial, sans-serif; font-size: 13px;color: #000000;text-align:center;" st-content="viewonline">
                                       <p style="text-align: center; font-size: 12px; color: #666; margin: 0; padding: 20px;" align="center">Was deze e-mail niet interessant voor u? <a href="" style="color: #3887c7; text-decoration: underline;">Wijzig hier uw interesses</a>. Helemaal geen e-mail meer ontvangen? <a href="" style="color: #3887c7; text-decoration: underline;">Klik hier om af te melden</a>. Geen e-mail meer missen in uw inbox? Voeg <a href="" style="color: #3887c7; text-decoration: underline;">info@easyswitch.nl</a>toe aan uw adresboek. © 2015 EasySwitch.nl - Powered by Overstappen.nl. Alle rechten voorbehouden.</p>
                                       <p style="text-align: center; font-size: 12px; color: #666; margin: 0; padding: 20px;" align="center"><u>EasySwitch.nl</u> | <u>Contact</u> | <u>Privacy policy</u> | <u>Algemene voorwaarden</u> | KvK:34331885</p>
                                    </td>
                                 </tr>
                                 <!-- Spacing -->
                                 <tr>
                                    <td width="100%" height="10"></td>
                                 </tr>
                                 <!-- Spacing -->
                              </tbody>
                           </table>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </td>
         </tr>
      </tbody>
   </table>
   <!-- End of postfooter -->

</body>
</html>