問題描述
Outlook，gmail基本問題（導致代碼） (Outlook, gmail basic issue (caused the code))
I found issue when try to create my first email template design that I think it caused the code (I am so new for that).
This is the screenshot:
Wondering why the "blog post" and "sidebar" section are not same width the "table section" above?
I used the code something like this:
<!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>Mail 2</title>
<style type="text/css">
some style
</style>
<meta name="robots" content="noindex,nofollow">
<meta property="og:title" content="Mail 2">
</head>
<body width="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#ffffff">
<!--[if gte mso 9]>
<v:background fill="t">
<v:fill type="tile" src="https://lh5.googleusercontent.com/-6styRrYxl3U/T7Sg_Cbww0I/AAAAAAAAAkE/UWVWEJDfSj0/h120/header-bg.png" />
</v:background>
<![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td>
<table align="center" width="600">
<tr>
<td>
This is above table section that shown correct
</td>
</tr>
</table>
<table width="600">
<tr>
<td width="340" colspan="1" class="blog post">
This is below section that shown not correct as above. Blog post section that looks out of the box.
</td>
<td width="200" colspan="1" class="blog post">
<table>
</tr>
<td>
Blah blah. This is sidebar section that looks out of the box.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
參考解法
方法 1:
If you only have two rows and two column why make it so complicated?
<table width="596px" border="0" cellspacing="2" cellpadding="0">
<tr>
<td>Content 1</td>
<td>Content 2</td>
</tr>
<tr>
<td>Content 3</td>
<td>Content 4</td>
</tr>
</table>
Place whatever content you want in each of the "content spots" and job done. You have far too many td's and tr's, best practise is to keep it simple. I would also suggest giving the table a width of 596px rather than 100% as this can cause display issues with certain email clients.
方法 2:
I noticed a couple errors in your code.
1.) In bottom 2nd table, you had </tr> instead of <tr>
2.) top table was align center, but bottom did not have align declare
3.) On bottom table, td widths add up to 540, not the declared 600
I believe the errors above were causing the issue. If not, I would need a bit more info into what exactly is inside each table as it could be image size, further errors in the code inside nested tables, etc.
See code snippet below:
<!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>Mail 2</title> <style type="text/css"> some style </style> <meta name="robots" content="noindex,nofollow"> <meta property="og:title" content="Mail 2"> </head> <body width="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#ffffff"> <!--[if gte mso 9]> <v:background fill="t"> <v:fill type="tile" src="https://lh5.googleusercontent.com/-6styRrYxl3U/T7Sg_Cbww0I/AAAAAAAAAkE/UWVWEJDfSj0/h120/header-bg.png" /> </v:background> <![endif]--> <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff"> <tr> <td> <table align="center" width="600"> <tr> <td> This is above table section that shown correct </td> </tr> </table> <table align="center" width="600"> <tr> <td width="340" class="blog post"> This is below section that shown not correct as above. Blog post section that looks out of the box. </td> <td width="200" class="blog post"> <table> <tr> <td> Blah blah. This is sidebar section that looks out of the box. </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </body> </html>
(by Deny A、Magnum26、Gortonington)