HTML 电子邮件 : Put one table on another table

Question

我希望有一张 table 应该在另一张 table 上。就像在图片中一样。

<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>

PS:我不能使用 div ，因为我正在制作 HTML Emailer。我必须只使用 table 和 inline-css 任何帮助都会很棒。

谢谢

Answer 1

你不能在 outlook 中使用 position , top 。所以这可能不适用于您正在寻找的 outlook。