如何使此元素在此代码中按应有的方式显示?
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-->     <!-- 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-->     <!-- 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-->    
<!-- 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>
我正在发送 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-->     <!-- 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-->     <!-- 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-->    
<!-- 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>