如何使此元素在此代码中按应有的方式显示?

How do I make this element appear as it should in this code?

我正在发送 HTML 电子邮件,并且我已将大部分元素按应有的方式显示。但出于某种原因,我尝试插入的一个元素,一个带有地址和联系人的小框没有按应有的方式显示。

底部带有地址的灰色条应该与主白色框的宽度相同,并且应该被蓝色包围。

我的代码是:

<!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>BigParser</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body style="margin: 0; padding: 0;">
    <table border="1" cellpadding="0" cellspacing="0" width="100%">
      <!--main background color, size, etc.-->
      <tr bgcolor= "#21A1EC">
        <td align="center" style="padding: 40px 0 30px 0;">
          <!--this BigParser logo at the top-->
          <img src="bigparser.gif" width="186" height="43" style="display:block;" />
        </td>
      </tr>
      <tr bgcolor= "#21A1EC">
        <td align="center">
          <table border="1" cellpadding="0" cellspacing="0" width="600">
            <!--creates main padded content table-->
            <tr width=100% bgcolor= "#ffffff">
              <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
                <!--title formatting-->
                Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix-->
              </td>
            </tr>
            <tr width="100%" bgcolor= "#ffffff">
              <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
                <!--content formatting-->
                content text
              </td>
            </tr>
            <tr>
              <!--this is the unsub/links box, contains the unsubscribe and links to social media-->
              <table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
                <tr align="center" >
                  <!--this contains unsub link and copyright-->
                  <td bgcolor="50B54D" width="60%">
                    unsub link
                  </td>
                  <td bgcolor="EC552B" width="40%">
                    social media links
                  </td>
                </tr>
              </table>
            </tr>
            <tr bgcolor="EEEFF1" align="left" style="font-size:15;">
              <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
                BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>

但是,如果我将地址栏移到绿色和橙色框上方,地址栏似乎格式正确,

<table border="1" cellpadding="0" cellspacing="0" width="600">
            <!--creates main padded content table-->
            <tr width=100% bgcolor= "#ffffff">
              <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
                <!--title formatting-->
                Lorem ipsum<!--do not delete--> &nbsp&nbsp&nbsp&nbsp<!-- centering title fix-->
              </td>
            </tr>
            <tr width="100%" bgcolor= "#ffffff">
              <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
                <!--content formatting-->
                content text
              </td>
            </tr>
            <tr bgcolor="EEEFF1" align="left" style="font-size:15;">
              <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
                BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
              </td>
            </tr>
            <tr>
              <!--this is the unsub/links box, contains the unsubscribe and links to social media-->
              <table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
                <tr align="center" >
                  <!--this contains unsub link and copyright-->
                  <td bgcolor="50B54D" width="60%">
                    unsub link
                  </td>
                  <td bgcolor="EC552B" width="40%">
                    social media links
                  </td>
                </tr>
              </table>
            </tr>          
          </table>

我不确定为什么会这样,我该如何更改代码,使地址显示在绿色和橙色框下方,但与上面的其余元素保持相同的宽度?

将地址行移动到取消订阅 link/social 媒体链接 table 并使其成为 colspan="2"。我希望这就是你所要求的

<!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>BigParser</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body style="margin: 0; padding: 0;">
  <table border="1" cellpadding="0" cellspacing="0" width="100%">
    <!--main background color, size, etc.-->
    <tr bgcolor="#21A1EC">
      <td align="center" style="padding: 40px 0 30px 0;">
        <!--this BigParser logo at the top-->
        <img src="bigparser.gif" width="186" height="43" style="display:block;" />
      </td>
    </tr>
    <tr bgcolor="#21A1EC">
      <td align="center">
        <table border="1" cellpadding="0" cellspacing="0" width="600">
          <!--creates main padded content table-->
          <tr width=100% bgcolor="#ffffff">
            <td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
              <!--title formatting-->
              Lorem ipsum
              <!--do not delete-->&nbsp&nbsp&nbsp&nbsp
              <!-- centering title fix-->
            </td>
          </tr>
          <tr width="100%" bgcolor="#ffffff">
            <td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
              <!--content formatting-->
              content text
            </td>
          </tr>
          <tr>
          <td align="left" valign="top">
            <!--this is the unsub/links box, contains the unsubscribe and links to social media-->
            <table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
              <tr align="center">
                <!--this contains unsub link and copyright-->
                <td bgcolor="#50B54D" width="60%">
                  unsub link
                </td>
                <td bgcolor="#EC552B" width="40%">
                  social media links
                </td>
              </tr>
              <tr bgcolor="#EEEFF1" align="left" style="font-size:15;">
            <td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;" colspan="2">
              BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
            </td>
          </tr>
            </table>
            </td>
          </tr>

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

</html>