user123 user123 - 2 months ago 9
CSS Question

HTML Email : Put one table on another table

I would like to have that there is a table which should be on another table. just like in the image.



<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" style="background-image: url(http://www.hubilo.com/eventApp/ws/images/event/cover/facebook/thumb/2712_1467715620.jpg); background-repeat: no-repeat; background-size: cover; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; border-collapse: collapse; mso-table-lspace: 0pt;mso-table-rspace: 0pt; width: 100%; ">


<tr>
<td valign="top" align="center" style="">

<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt ; ">
<tbody>
<tr>
<td>
<table width="600" cellspacing="0" cellpadding="0" border="0" align="center" class="container" style="border-spacing:0px ;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
<tbody>



<tr>
<td align="center">
<table align="center" width="600">
<td width="50" valign="top" align="left" style="" >

</td>

<td width="520" valign="top" align="left" style="border-left: 2px solid #6fbe4a;" >

<table width="520" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">

<tr>
<td align="left">
<p style="padding: 10px 10px;">
<span style="color: white; text-align: center; font-weight:600 !important; text-align: left; font-style: normal; letter-spacing: 0px; font-size: 22px; line-height:22px; font-family: 'open sans', arial, sans-serif;">Testing Event</span><br><br>
<td>
<table align="right" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background: #6fbe4a;">
<tbody>
<tr>
<td valign="middle" align="center" style="color: #000000;display: block;padding: 5px; width:90px; cursor: pointer;">
<a style="color: #FFFFFF;text-align: center;text-decoration: none;-webkit-text-size-adjust: none;line-height: 32px; vertical-align:middle;text-transform:uppercase;font-family: 'proxima_novasemibold', Arial, sans-serif;" href="http://www.hubilo.com/widget/webpanel/login.php?event=c1d1b1dc8d40c37429a8fd1f627c5c5e"><span style="font-weight:100;font-size:12px;">REGISTER</span></a>
</td>
</tr>
</tbody></table>

</p>

</td>

</td>
</tr>

</table>


</td>

<td width="30" valign="top" align="right" style="" >

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



</tbody>
</table>

</td>
</tr>


</tbody></table>

</td>
</tr>

</table>




<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" style=" background: #ebeef0;margin: 0 auto !important; padding: 0px; width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; z-index: 1001;" >

<tr>
<td align="center" width="550">

<table width="550" cellspacing="0" cellpadding="0" border="0" style="margin: 0 auto !important; padding: 0px; width:550px !important; background: #FFFFFF; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; border:thin red solid;" >

<tr>
<td valign="top" align="center" style="mso-table-rspace: 0pt; mso-table-lspace:0pt; border-collapse: collapse; font-family: 'open sans', arial, sans-serif; font-weight: 500; font-size: 24px; letter-spacing: 0px; padding: 15px 0px;">
<span style="font-weight: 600;">About</span> <span> Us</span>
</td>
</tr>

<tr>
<td class="text" style="font-family: 'open sans', arial, sans-serif;font-size: 11px; font-weight: 500; color: #555555; text-align:center;line-height: 15px; letter-spacing:0px;padding-top: 0px;color: #000000; padding-left: 40px; padding-right: 40px; padding-bottom: 20px;">

<tr>
<td valign="top" align="center" style="padding-top:0px;padding-bottom:20px; ">

<table align="center" cellspacing="0" cellpadding="0" border="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; background: #6fbe4a;">
<tbody>
<tr>
<td valign="middle" align="center" style="color: #000000;display: block;padding: 5px 20px; width:110px; cursor: pointer;">
<a style="color: #FFFFFF;text-align: center;text-decoration: none;-webkit-text-size-adjust: none;line-height: 32px; vertical-align:middle;text-transform:uppercase;font-family: 'proxima_novasemibold', Arial, sans-serif;" href="http://www.hubilo.com/widget/webpanel/login.php?event=c1d1b1dc8d40c37429a8fd1f627c5c5e"><span style="font-weight:100;font-size:12px;">REGISTER</span></a>
</td>
</tr>
</tbody></table>

</td>
</tr>

</table >

</td>
</tr>

</table>

</tr>
</td>





here is the image

PS: I can't use
div
, as I am making HTML Emailer. I have to use
table
and inline-css only
Any help would be great.

Thank You

Answer

You can't use position , top in outlook. so this may not work in outlook which you are looking for.