"Basic E mailer in table"
Bootstrap 4.1.1 Snippet by tapan

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>SCIGST EMAILER</title> <style type="text/css"> body { padding-top: 0 !important; padding-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin:0 !important; width: 100% !important; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; -webkit-font-smoothing: antialiased !important; } .tableContent img { border: 0 !important; display: inline-block !important; outline: none !important; } p, h1,h2,h3,ul,ol,li,div{ margin:0; padding:0; } h1,h2{ font-weight: normal; background:transparent !important; border:none !important; } td,table{ vertical-align: top; } td.middle{ vertical-align: middle; } a{ text-decoration: none; } a.link1{ font-size: 16px; color: #a5a5a5; } a.link2{ font-size: 18px; font-weight: bold; color: #000000; text-decoration: underline; } a.link3{ font-size: 15px; font-weight: bold; color: #ffffff; background-color: #2da4a8; padding: 11px 15px; text-decoration: none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; text-align: center; display:inline-block; } .contentEditable li{ } h1{ font-size: 24px; font-weight: bold; color: #000000; line-height: 150%; } h2{ font-size: 18px; font-weight: bold; color: #000000; line-height: 150%; height:60px; } p{ font-size: 16px; color: #000000; line-height: 150%; text-align: left; } .bgItem{ background: #ffffff; } .bgBody{ background: #ffffff; } </style> <script type="colorScheme" class="swatch active"> { "name":"Default", "bgBody":"ffffff", "link":"555555", "color":"000000", "bgItem":"ffffff", "title":"000000" } </script> </head> <body paddingwidth="0" paddingheight="0" class='bgBody' style="padding-top: 0; padding-bottom: 0; padding-top: 0; padding-bottom: 0; background-repeat: repeat; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;" offset="0" toppadding="0" leftpadding="0"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="tableContent bgBody" align="center" style='font-family:Helvetica, sans-serif;'> <tr> <td align='center' class='movableContentContainer'> <!-- =============== START HEADER =============== --> <div class='movableContent'> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td colspan="2" height='10' bgcolor="#e05121"> </td></tr> <tr height="120"> <td width='400' align="left" style='vertical-align:middle;'> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="Logo" width='221' height='72' data-default="placeholder" data-max-width="300" data-max-height="100"> </div> </div> </td> <td width='200' align="right" valign="bottom" style='vertical-align:middle;font-weight: bold;'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> (079) 6622 4747<br/> (079) 2693 7494 </div> </div> </td> </tr> </table> </div> <div class='movableContent'> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="Header Image" width='600' height='226' data-default="placeholder" data-max-width="600"> </div> </div> </td> </tr> <tr><td height='10' bgcolor="2da4a8"></td></tr> </table> </div> <!-- =============== END HEADER =============== --> <!-- =============== START BODY =============== --> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <tr><td colspan="5" height='30'></td></tr> <tr> <td width='20'></td> <td width='225'> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="image" width='225' height='225' data-default="placeholder" data-max-width="150"> </div> </div> </td> <td width='30'></td> <td width='305'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2 style='font-size: 24px;'>Showcase of the Day</h2> <br/> <p>This wonderful house has 2 floors and a finished basement. Great light and space, it's a great home for a young family. Located in a peaceful neighborhood.</p> <br/><br/> <p style='text-align: right;'><a target='_blank' href="#" class='link2' >See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='30'></td></tr> </table> </td> </tr> </table> </div> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="2da4a8" style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <tr><td colspan="3" height='11'></td></tr> <tr> <td width='20'></td> <td> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='font-size: 30px; text-align: center;color: #ffffff;line-height: 150%;'>This week's listings</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='11'></td></tr> </table> </td> </tr> </table> </div> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td width='190' class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <table width="190" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' align="center"> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="image" width='100' height='100' data-default="placeholder" data-max-width="150"> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='50'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2 style='text-align: left;'>Beautiful House in Suburbs</h2> </div> </div> </td> <td width='10'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='120'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: left;'>Only $170,000 with 2 amazing rooms</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' > <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: center;'><a target='_blank' href="#" class='link3' style='color:#ffffff;'>See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> </table> </td> <td width='15'></td> <td wisth='190' class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <table width="190" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' align="center"> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="image" width='100' height='100' data-default="placeholder" data-max-width="150"> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='50'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2 style='text-align: left;'>Duplex in the City</h2> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='120'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: left;'>A wonderful place built in the mid-60’s with a great view</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' > <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: center;'><a target='_blank' href="#" class='link3' style='color:#ffffff;'>See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> </table> </td> <td width='15'></td> <td width='190' class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <table width="190" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' align="center"> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="image" width='100' height='100' data-default="placeholder" data-max-width="150"> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='50'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2 style='text-align: left;'>4 1/2 for Rent</h2> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='120'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: left;'> 2 big rooms, 1 great bathroom and kitchen.</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' > <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: center;'><a target='_blank' href="#" class='link3' style='color:#ffffff;'>See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> </table> </td> </tr> </table> </td> </tr> </table> </div> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td width='190' class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <table width="190" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' align="center"> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="image" width='100' height='100' data-default="placeholder" data-max-width="150"> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='50'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2 style='text-align: left;'>Beautiful House in Suburbs</h2> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='120'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: left;'>Only $170,000 with 2 amazing rooms</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' > <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: center;'><a target='_blank' href="#" class='link3' style='color:#ffffff;'>See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> </table> </td> <td width='15'></td> <td wisth='190' class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <table width="190" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' align="center"> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="image" width='100' height='100' data-default="placeholder" data-max-width="150"> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='50'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2 style='text-align: left;'>Duplex in the City</h2> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='120'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: left;'>A wonderful place built in the mid-60’s with a great view</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' > <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: center;'><a target='_blank' href="#" class='link3' style='color:#ffffff;'>See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> </table> </td> <td width='15'></td> <td width='190' class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <table valign="bottom" style='vertical-align: bottom;' width="190" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' align="center"> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="image" width='100' height='100' data-default="placeholder" data-max-width="150"> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='50'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2 style='text-align: left;'>4 1/2 for Rent</h2> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' height='120'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: left;'> 2 big rooms, 1 great bathroom and kitchen.</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' > <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align: center;'><a target='_blank' href="#" class='link3' style='color:#ffffff;'>See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> </table> </td> </tr> </table> </td> </tr> </table> </div> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <tr><td colspan="5" height='30'></td></tr> <tr> <td width='20'></td> <td valign='middle' width='150' height='150' style="vertical-align:middle;background-color: #2da4a8;" > <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style="font-family: Georgia, serif; font-style: italic; font-size: 34px; color: #ffffff; line-height: 150%; margin: 15px; text-align: center;"> Free Listing! </p> </div> </div> </td> <td width='15'></td> <td width='395'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2>Want to add a listing?</h2> <p>Here’s a special offer to showcase your house this month! Enter PROMOCODE and get the listing fee waived.</p> <br/> <p style='text-align: right;'><a target='_blank' href="#" class='link2' >Get details</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='30'></td></tr> </table> </td> </tr> </table> </div> <!-- =============== END BODY =============== --> <!-- =============== START FOOTER =============== --> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td height='20'></td></tr></table> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem'> <tr><td height='10' bgcolor="2da4a8"></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td height='30'></td></tr> <tr> <td align='center'> <table width="204" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td width='68' align="center"> <div class="contentEditableContainer contentFacebookEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="Facebook" data-default="placeholder" width='50' height='50' data-max-width="50" data-customIcon="true" > </div> </div> </td> <td width='68' align="center"> <div class="contentEditableContainer contentTwitterEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="Twitter" data-default="placeholder" width='50' height='50' data-max-width="50" data-customIcon="true" > </div> </div> </td> <td width='68' align="center"> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="https://i.stack.imgur.com/AnBAT.png" alt="Pinterest" width='50' height='50' data-max-width="50"> </div> </div> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </div> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem'> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td height='20'></td></tr> <tr> <td align='center'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable" > <p style='color:#a5a5a5;text-align:center;font-size:11px;line-height:19px;'> <a target='_blank' href="#" style='color:#a5a5a5'>Contact us</a> <br><br> Sent by [SENDER_NAME] <br> [CLIENTS.COMPANY_NAME] <br> [CLIENTS.ADDRESS] <br> [CLIENTS.PHONE] <br> <a target='_blank' href="[FORWARD]" style="color:#a5a5a5;">Forward to a friend</a> <br> <a target='_blank' href="[UNSUBSCRIBE]" style='color:#a5a5a5;'>Unsubscribe</a> </p> </div> </div> </td> </tr> <tr><td height='20'></td></tr> </table> </td> </tr> </table> </div> <!-- =============== END FOOTER =============== --> </td> </tr> </table> <!--Default Zone <div class="customZone" data-type="image"> <div class="movableContent"> <table width="560" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable" align='left'> <img src="images/header.jpg" alt='header' data-default="placeholder" data-max-width='600' width='600' > </div> </div> </td> </tr> </table> </div> </div> <div class='customZone' data-type="text"> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <tr><td colspan="3" height='30'></td></tr> <tr> <td width='20'></td> <td width='560'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2>Great home for families</h2> <br/> <p> This wonderful house has 2 floors and a finished basement. Great light and space, it's a great home for a young family. Located in a peaceful neighborhood.</p> <br/> <p style='text-align: right;'><a target='_blank' href="#" class='link2' >See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='30'></td></tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="imageText"> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <tr><td colspan="5" height='30'></td></tr> <tr> <td width='20'></td> <td width='150'> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="https://www.cheapbestfares.com/images/things-to-do.jpg" alt="image" width='150' height='150' data-default="placeholder" data-max-width="150"> </div> </div> </td> <td width='15'></td> <td width='395'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2>Showcase of the Day</h2> <br/> <p>This wonderful house has 2 floors and a basement. There is enough light for you and your kids to run around this wonderful spacious living room. A great place for you and your family in a peaceful neighborhood.</p> <br/> <p style='text-align: right;'><a target='_blank' href="#" class='link2' >See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='30'></td></tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="Textimage"> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <tr><td colspan="5" height='30'></td></tr> <tr> <td width='20'></td> <td width='395'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2>Showcase of the Day</h2> <br/> <p>This wonderful house has 2 floors and a basement. There is enough light for you and your kids to run around this wonderful spacious living room. A great place for you and your family in a peaceful neighborhood.</p> <br/> <p style='text-align: right;'><a target='_blank' href="#" class='link2' >See more</a></p> </div> </div> </td> <td width='15'></td> <td width='150'> <div class="contentEditableContainer contentImageEditable"> <div class="contentEditable"> <img src="images/small.jpg" alt="image" width='150' height='150' data-default="placeholder" data-max-width="150"> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='30'></td></tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="textText"> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td colspan="5" height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td width='290' class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <table width="290" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td colspan="5" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' align="center"> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2 style='text-align: left;'>Beautiful House in Suburbs</h2> <br> <p style='text-align: left;'>Only $170,000 with 2 amazing rooms</p> <br> <p style='text-align: right;'><a target='_blank' href="#" class='link2' >See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='20'></td></tr> </table> </td> <td width='20'></td> <td wisth='290' class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <table width="290" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td colspan="5" height='20'></td></tr> <tr> <td width='20'></td> <td width='150' align="center"> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2 style='text-align: left;'>Duplex in the City</h2> <br> <p style='text-align: left;'>A wonderful place built in the mid-60’s with a great view</p> <br> <p style='text-align: right;'><a target='_blank' href="#" class='link2' >See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='20'></td></tr> </table> </td> </tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="qrcode"> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <tr><td colspan="5" height='30'></td></tr> <tr> <td width='20'></td> <td width='75' align="center" style='vertical-align:middle;' valign='middle'> <div class='contentEditableContainer contentQrcodeEditable'> <div class='contentEditable' style='text-align:center;'> <img src="/applications/Mail_Interface/3_3/modules/User_Interface/core/v31_campaigns/images/neweditor/default/qr_code.png" width="75" height="75" data-max-width='150'> </div> </div> </td> <td width='15'></td> <td width='470'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2>Subtitle</h2> <br/> <p>[CLIENTS.WEBSITE]</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='30'></td></tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="gmap"> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <tr><td colspan="5" height='30'></td></tr> <tr> <td width='20'></td> <td width='250' align="center"> <div class='contentEditableContainer contentGmapEditable'> <div class='contentEditable' style='text-align:center;'> <img src="/applications/Mail_Interface/3_3/modules/User_Interface/core/v31_campaigns/images/neweditor/default/gmap_example.png" data-default="placeholder" data-max-width='250' width='200' height='200'> </div> </div> </td> <td width='15'></td> <td width='295'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2>Subtitle</h2> <br/> <p>[CLIENTS.WEBSITE]</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='30'></td></tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="social"> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <tr><td colspan="9" height='20'></td></tr> <tr> <td width='20'></td> <td colspan="9"> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2>Follow us to get updates on listings</h2> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="9" height='10'></td></tr> <tr> <td width='20'></td> <td width='50'> <div class="contentEditableContainer contentFacebookEditable"> <div class="contentEditable"> <img src="images/facebook.png" data-default="placeholder" alt="Facebook" width='50' height='50' data-max-width="50" data-customIcon="true" > </div> </div> </td> <td width='10'></td> <td style='vertical-align: middle;'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p>Like us on facebook.</p> </div> </div> </td> <td width='15'></td> <td width='50'> <div class="contentEditableContainer contentFacebookEditable"> <div class="contentEditable"> <img src="images/twitter.png" data-default="placeholder" alt="Twitter" width='50' height='50' data-max-width="50" data-customIcon="true" > </div> </div> </td> <td width='10'></td> <td style='vertical-align: middle;'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p>Follow us on twitter.</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="9" height='20'></td></tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="twitter"> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <tr><td colspan="5" height='20'></td></tr> <tr> <td width='20'></td> <td width='50'> <div class="contentEditableContainer contentTwitterEditable"> <div class="contentEditable"> <img src="images/twitter.png" data-default="placeholder" alt="Twitter" width='50' height='50' data-max-width="50" data-customIcon="true" > </div> </div> </td> <td width='10'></td> <td style='vertical-align: middle;'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p>Follow us on twitter.</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='20'></td></tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="facebook"> <div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" class='bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> <tr><td colspan="5" height='20'></td></tr> <tr> <td width='20'></td> <td width='50'> <div class="contentEditableContainer contentFacebookEditable"> <div class="contentEditable"> <img src="images/facebook.png" data-default="placeholder" alt="Facebook" width='50' height='50' data-max-width="50" data-customIcon="true" > </div> </div> </td> <td width='10'></td> <td style='vertical-align: middle;'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p>Like us on facebook.</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='20'></td></tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="line"> <div class='movableContent'> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <div style='border-top:1px solid #555555;'></div> </td> </tr> </table> </div> </div> <div class="customZone" data-type="colums1v2"><div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" > <tr> <td width='600' class='newcontent bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> </td> </tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="colums2v2"><div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" > <tr> <td width='290' class='newcontent bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> </td> <td width='20'></td> <td width='290' class='newcontent bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> </td> </tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="colums3v2"><div class='movableContent'> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center"> <tr><td height='20'></td></tr> <tr> <td> <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" > <tr> <td width='189' class='newcontent bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> </td> <td width='16'></td> <td width='189' class='newcontent bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> </td> <td width='16'></td> <td width='189' class='newcontent bgItem' style='border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;'> </td> </tr> </table> </td> </tr> </table> </div> </div> <div class="customZone" data-type="facebookv2"> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td align='center'> <div class="contentEditableContainer contentFacebookEditable"> <div class="contentEditable"> <img src="images/facebook.png" alt="Facebook" width='50' height='50' data-max-width="50"> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='15'></td></tr> <tr> <td width='20'></td> <td align='center'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align:center;'>Like us on facebook.</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> </table> </div> <div class="customZone" data-type="twitterv2"> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td colspan="3" height='20'></td></tr> <tr> <td width='20'></td> <td align='center'> <div class="contentEditableContainer contentTwitterEditable"> <div class="contentEditable"> <img src="images/twitter.png" alt="Twitter" width='50' height='50' data-max-width="50"> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='15'></td></tr> <tr> <td width='20'></td> <td align='center'> <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <p style='text-align:center;'>Follow us on twitter.</p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="3" height='20'></td></tr> </table> </div> <div class="customZone" data-type="textv2"> <table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" > <tr><td colspan="3" height='30'></td></tr> <tr> <td width='20'></td> <td > <div class="contentEditableContainer contentTextEditable"> <div class="contentEditable"> <h2>Great home for families</h2> <br/> <p> This wonderful house has 2 floors and a finished basement. Great light and space, it's a great home for a young family. Located in a peaceful neighborhood.</p> <br/> <p style='text-align: right;'><a target='_blank' href="#" class='link2' >See more</a></p> </div> </div> </td> <td width='20'></td> </tr> <tr><td colspan="5" height='30'></td></tr> </table> </div> --> <!--Default Zone End--> </body> </html>

Related: See More

Material Kit React
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: