在不使用边距和 div 的情况下移动表格（在表格内）答案

【问题标题】：Moving a table (within a table) without using margins and div's在不使用边距和 div 的情况下移动表格（在表格内）
【发布时间】：2018-01-17 10:01:07
【问题描述】：

我正在尝试创建一个 HTML 电子邮件，我想定位一个嵌套的 table 并将其移动到父 table 的顶部（嵌套的 table 将在父 10px 下方大约 table )。

通常margins 和div 会是我的首选解决方案，但Outlook 等客户端不支持margins 和div 对电子邮件来说总是很麻烦。

没有上述方法有没有办法做到这一点？

如果是这样，怎么做？

这是我目前所拥有的：

<body style="margin:0;padding:0">
  <table bgcolor="#F1F3F2" border="0" cellpadding="0" cellspacing="0" style="background-color:#f1f3f2;" width="100%">
    <tbody>
      <tr>
        <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;">
          <!--------->
          <!-- TOP -->
          <!--------->
          <table border="1" cellpadding="0" cellspacing="0" style="max-width:692px; background-image: url(https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/header-image.png);" width="692" height="400">
            <tbody>
              <tr>
                <!-- TD for whole top section -->
                <td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding:25px 28px; border: 1px solid red;">
                  <!--------------------->
                  <!-- LOGO AND SOCIAL -->
                  <!--------------------->
                  <table border="1" cellpadding="0" cellspacing="0" width="100%"> <!-- THIS TABLE NEEDS MOVING UP -->
                    <tbody>
                      <tr>
                        <td align="left" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;">
                          <a href="http://www.techdata.co.uk/" target="_blank"><img alt="Precise.TV" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/logo.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff"></a>
                        </td>
                        <!-- SOCIAL ICONS -->
                        <td style="text-align: right;">
                          <!--YouTube -->
                          <a href=""><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/youtube-icon.png"></a>
                          <!--Twitter -->
                          <a href=""><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/twitter-icon.png"></a>
                          <!--LinkedIn -->
                          <a href=""><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/linkedin-icon.png"></a>
                          <!--Facebook -->
                          <a href=""><img src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/facebook-icon.png"></a>
                        </td>
                      </tr>
                      <!----------------->
                      <!-- HEADER TEXT -->
                      <!----------------->
                      <tr>
                        <td style="padding-top:50px;">
                          <!-- PADDING-->
                        </td>
                      </tr>
                      <tr>
                        <td colspan="2" style="height: 100px; color: #fff; font-family:'Open Sans',Helvetica,Arial,sans-serif; text-align: center; font-size: 26px;">

                          THIS MONTHS' SHAREABLE<br> MOMENTS FROM PRECISE.TV

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

从角度来看，“本月...”文本应位于红线上方约 10 像素处。

编辑：

现在的样子：

我希望它看起来如何：

我是如何实现上述目标的：使用<table border="1" cellpadding="0" cellspacing="0" width="100%" style="margin-top:-170px;"> 但我不能使用margin-top:-170px;，因为电子邮件客户端不支持边距。

在代码中也标注了需要向上移动的表格。

【问题讨论】：

您可以使用<br> 标签作为邮件支持的边距。
您能否在代码中清楚地标出需要移动的实际嵌套表？
@zer00ne 完成 :)
您为什么担心它在 Outlook 中的外观？无论如何，它永远不会在 2007-2010、2013、2016 年工作。您不能以编码的方式使用背景图像并让它们在 Outlook 中工作。使用间隔表增加表之间的高度。

标签： html css html-email

【解决方案1】：

将valign="top"属性添加到外部td：

<!-- TD for whole top section -->
    <td valign="top" align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding:25px 28px; border: 1px solid red;">

【讨论】：

【解决方案2】：

我会放置一个有两行的表格。第一行是文本，第二行是另一个较小宽度的表格，红色背景，居中。

下面是一段你应该可以使用的代码。

    <table cellpadding="0" cellspacing="0" border="0" bgcolor="#000000">
    <tr>
    <td style="color: #fff; font-family:'Open Sans',Helvetica,Arial,sans-serif; text-align: center; font-size: 26px;"> THIS MONTHS' SHAREABLE<br> MOMENTS FROM PRECISE.TV </td>
    </tr>
    <tr>
    <td>
    
        <table cellpadding="0" cellspacing="0" border="0" width="50" align="center">
        <tr>
        <td bgcolor="#ff0000" height="3" style="height:3px; line-height:0px; font-size:0px;"></td>
        </tr>
        </table>
    
    </td>
    </tr>
    </table>

让我知道这是否适合您。

【讨论】：

【解决方案3】：

您可以在文本“THIS MONTHS”之前使用<br> 标签
您可以在带有文本的行之前添加额外的行<tr> <td>组合

PS 我注意到td 元素在这里缺少colspan="2"

<tr>
    <td style="padding-top:50px;">
        <!-- PADDING-->
    </td>
</tr>

【讨论】：

使嵌套表格向下移动。我需要将嵌套表向上移动吗？