html - two column table layout -
html - two column table layout -
i'm creating e-mail template send out reason, unable create 2 simple columns in footer area.
layout:
code:
<div style="width: 100%; height: 100%;"> <table style="margin: 0px auto 0px auto; padding: 20px 20px 20px 20px; font: normal 10.5px; color: #777777; width: 100%; height: 100%;" align="center"> <tbody> <tr> <td> <table class="content" style="background: none repeat scroll 0% 0% #ffffff; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff"> <thead> <tr style="display: inline-block; width: 100%; background: #1f1f1f;" bgcolor="#1f1f1f"> <td style="width: 100%;" align="left" valign="middle"> <h1 style="padding: 15px 15px 15px 15px; color: #ffffff;">test</h1> </td> <td style="border-left: 1px solid #ffffff;" align="right"> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; border-bottom: 1px solid #ffffff; font-family: helvetica, arial, verdana; font-size: 8px; letter-spacing: 1.5px;">test</td> </tr> <tr> <td style="text-decoration: none; color: #ffffff; text-align: center; padding: 15px 15px 15px 15px; font-family: helvetica, arial, verdana; font-size: 8px; letter-spacing: 1.5px;">test</td> </tr> </tbody> </table> </td> </tr> </thead> <tbody> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> <h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;"> </h4> </td> </tr> <tr> <td> </td> </tr> </tbody> <tfoot> <tr> <td>test</td> <td>test</td> </tr> </tfoot> </table> </td> </tr> </tbody> </table> how modify above code create 2 simple columns in footer area, still within e-mail's container?
you should create simple construction of html,
don't create table in table. can utilize rowspan. html<th> rowspan attribute cells in thead tag, recommend utilize th tag html <thead> tag don't utilize style display:inline-block; on tr tag put color style on tr tag if cells doesn't have different color
<div style="width: 100%; height: 100%;"> <table class="content" style="background: none; box-shadow: 0px 1px 2px rgba; width: 600px; max-width: 600px; margin: 0px auto;" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff"> <thead> <tr style="width: 100%; background: #1f1f1f;color: #ffffff;"> <th style="width: 100%;" align="left" valign="middle" rowspan=2> <h1 style="padding: 15px 15px 15px 15px;">test</h1> </th> <th style="border-left: 1px solid #ffffff;border-bottom: 1px solid #ffffff;text-decoration: none;text-align: center; padding: 15px 15px" align="right"> test </th> </tr> <tr style="width: 100%; background: #1f1f1f;color: #ffffff; "> <th style="border-left: 1px solid #ffffff;text-decoration: none; text-align: center; padding: 15px 15px" align="right"> test </th> </tr> </thead> <tbody> <tr> <td style="background: red;" colspan="2"> </td> </tr> <tr> <td style="background: red;" colspan="2"> </td> </tr> <tr> <td style="background: red;" colspan="2"> <h4 style="color: #27ccc0; text-align: center; padding: 15px 15px 0px 15px;"> </h4> </td> </tr> <tr> <td style="background: red;" colspan="2"> </td> </tr> </tbody> <tfoot> <tr style="width: 100%; background: #1f1f1f; color: #ffffff;"> <td>test</td> <td>test</td> </tr> </tfoot> </table> </div> jsfiddle
html html5 email html-email
Comments
Post a Comment