Html 2013年展望中的tr、td宽度
我寻找的所有解决方案都不能帮助我解决问题。我无法获取在Outlook电子邮件客户端中工作的tr和td的宽度。以下是一个示例:Html 2013年展望中的tr、td宽度,html,email,outlook,html-email,email-client,Html,Email,Outlook,Html Email,Email Client,我寻找的所有解决方案都不能帮助我解决问题。我无法获取在Outlook电子邮件客户端中工作的tr和td的宽度。以下是一个示例: <table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; bo
<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="0" cellpadding="0" cellspacing="0">
<tbody width="600" style="box-sizing: border-box; width: 100%;">
<!--Header Row-->
<tr width="600" style="box-sizing: border-box; width: 100%;">
<td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td>
</tr>
<!--End Header Row--><!--Hero Image Row-->
<tr style="box-sizing: border-box; width: 100%;">
<td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td>
</tr>
<!--End Hero Image--><!--Main Heading/CTA-->
<tr width="600" style="box-sizing: border-box; width: 100%;">
<td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1>
<p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p>
</td>
<td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tbody>
<tr style="box-sizing: border-box;">
<td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
编织新门环
发现如何
我已尝试将固定宽度添加到所有td和tr。我试过去掉任何百分比。Outlook中没有任何功能…我的问题在哪里?可以说,您错过了td。您可以看到,两张较大的图像位于单个td上,最底层的一行位于两个td上。这就是您的表没有对齐的原因。另外,请尽量不要使用框大小调整,较旧的浏览器无法读取框大小,而且它的代码占用了文件大小。所有电子邮件开发者都知道几千字节在电子邮件中的重要性
编织新门环
发现如何
可以说你错过了td。您可以看到,两张较大的图像位于单个td上,最底层的一行位于两个td上。这就是您的表没有对齐的原因。另外,请尽量不要使用框大小调整,较旧的浏览器无法读取框大小,而且它的代码占用了文件大小。所有电子邮件开发者都知道几千字节在电子邮件中的重要性
编织新门环
发现如何
在第三行中,您添加了第二个宽度为25%的
获得更清晰输出的方法是将表分为两个表,一个用于图像的前两行,另一个用于具有两行的表的其余部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="1" cellpadding="0" cellspacing="0">
<tbody width="600" style="box-sizing: border-box; width: 100%;">
<!--Header Row-->
<tr width="600" style="box-sizing: border-box; width: 100%;">
<td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td>
</tr>
<!--End Header Row--><!--Hero Image Row-->
<tr style="box-sizing: border-box; width: 100%;">
<td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td>
</tr>
<!--End Hero Image--><!--Main Heading/CTA-->
</table>
<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="1" cellpadding="0" cellspacing="0">
<tbody width="600" style="box-sizing: border-box; width: 100%;">
<tr width="600" style="box-sizing: border-box; width: 100%;">
<td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1>
<p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p>
</td>
<td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tbody>
<tr style="box-sizing: border-box;">
<td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
编织新门环
在第三行
中,您添加了第二个宽度为25%的
获得更清晰输出的方法是将表分为两个表,一个用于图像的前两行,另一个用于具有两行的表的其余部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="1" cellpadding="0" cellspacing="0">
<tbody width="600" style="box-sizing: border-box; width: 100%;">
<!--Header Row-->
<tr width="600" style="box-sizing: border-box; width: 100%;">
<td width="600" style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><a href="http://example.org" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none;"> <img src="http://example.img-us3.com/BarberJ/header-image-560.png" width="100%" height="auto" alt="header-image.png" title="header-image.png" style="box-sizing: border-box;"></a></td>
</tr>
<!--End Header Row--><!--Hero Image Row-->
<tr style="box-sizing: border-box; width: 100%;">
<td style="box-sizing: border-box; display: inline-block; width: 100%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;"><img src="http://example.img-us3.com/BarberJ/hero-image-560.png" width="100%" height="auto" alt="hero-image.png" title="hero-image.png" style="box-sizing: border-box;"></td>
</tr>
<!--End Hero Image--><!--Main Heading/CTA-->
</table>
<table width="600" style="box-sizing: border-box; max-width: 600px; margin: 0px auto; width: 600px; height: 150px; background-color: #ffffff; table-layout: fixed; padding: 20px; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" border="1" cellpadding="0" cellspacing="0">
<tbody width="600" style="box-sizing: border-box; width: 100%;">
<tr width="600" style="box-sizing: border-box; width: 100%;">
<td width="75%" style="box-sizing: border-box; width: 75%; display: inline-block; padding: 0; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<h1 style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 26px; margin-bottom: 0px; font-weight: 800; color: #425563; margin-top: 4px;">Knitting New Knockers</h1>
<p style="box-sizing: border-box; font-family: 'Arial', sans-serif; font-size: 12px; margin-top: 4px; font-weight: 100; color: #425563;">How a knitting Group is putting the 'ta-da' back in ta-tas.</p>
</td>
<td width="25%" style="box-sizing: border-box; display: inline-block; padding: 0; width: 25%; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<table border="0" cellspacing="0" cellpadding="0" style="box-sizing: border-box; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;">
<tbody>
<tr style="box-sizing: border-box;">
<td bgcolor="#9F1C3B" style="box-sizing: border-box; display: inline-block; padding: 5px 15px; -webkit-border-radius: 30px; border-radius: 30px; color: #fff; border-collapse: collapse; mso-table-lspace: 0; mso-table-rspace: 0;" align="center"><a target="_blank" style="box-sizing: border-box; font-family: 'Arial', sans-serif; text-decoration: none; font-size: 16px; color: white;">Discover How</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
编织新门环