我正在处理一个 html 电子邮件，它显示了一个表格（660 像素），其中包含多个嵌套表格（210 像素）或“照片幻灯片”的填充网格，所有这些都具有属性 align="left"。这适用于所有浏览器和电子邮件客户端，Outlook.com/IE8/XP 除外。取而代之的是，幻灯片将显示在一个长条的无尽幻灯片上，并迫使外部桌子水平扩展！正确的方法应该是幻灯片通过向下扩展（就像在任何网页中发生的情况一样）在每个新行上通过最多 3 张幻灯片自动形成一个漂亮的网格。
使用 html 属性 align="left"，因为 MS Outlook 2007 将忽略“浮动”样式。我已经用 Litmus 进行了测试，奇怪的是它在 Outlook.com 中运行良好，但它们可能在 Windows 7/8 上运行。不过，我发现全球 30% 的市场份额仍在使用 Windows XP。
有人可以帮助改进这个 html 吗？
这是链接：http ://www.kevin.nl/test/email_grid.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">
<html>
<head>
<title>HTML-Email with grid</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html {height:100%;width:100%}
body {background-color:#ffffff;height:100%;}
.ReadMsgBody { width: 100%;}
.ExternalClass {width: 100%;}
table {border-collapse: collapse;}
.ExternalClass, .ExternalClass p, .ExternalClass span,
.ExternalClass font, .ExternalClass td, .ExternalClass div {
line-height: 100%;}
.ExternalClass * {line-height: 100%;}
table tr td {mso-line-height-rule: exactly;}
</style>
</head>
<body bgcolor="#ffffff" text="#666666" link="#1f8a92" vlink="#1f8a92" alink="#1f8a92">
<table border="0" cellspacing="0" cellpadding=0 width="100%" bgColor="#ffffff">
<tr>
<td align="center" valign="top" bgColor="#ffffff">
<table width="660" border="0" cellspacing="0" cellpadding="10">
<tr>
<td align="left" valign="top" style="font-size:18px; line-height:24px; font-family:Arial, Helvetica, sans-serif; color: #999999;font-weight: bold;"><font color="#666666" face="Arial, Helvetica, sans-serif" style="font-size:18px; line-height:24px; font-weight: bold; color: #666666;">HTML-Email: table (660px) with a filling grid of a variable amount of nested smaller tables (210px) or 'photoslides' with attribute align="left"</font></td>
</tr>
<tr>
<td align="left" valign="top" style="font-size:12px; line-height:18px; font-family:Arial, Helvetica, sans-serif; color: #666666;"><font color="#666666" face="Arial, Helvetica, sans-serif" style="font-size:12px;line-height:18px">This works in all browsers and emailclients, except Outlook.com (2013) in combination with IE8 (running Windows XP). Instead, the slides will be shown on one long horizontal bar of endless slides and force the outer table as well to expand horizontally! The correct way should be that the slides automatically form a nice grid of themselves by the maximum amount of 3 slides on each new line by growing downwards (like in any webpage happens).<br />
The html attribute align="left" is used, because MS Outlook 2007
will ignore the "float"-styles.<br />
<br>
</font></td>
</tr>
</table>
<table width="660" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="660" align="left" valign="top">
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
<!-- slide begin -->
<table width="210" border="0" cellpadding="9" cellspacing="0" align="left" style="float:left;display: inline;">
<tr>
<td width="190" height="200" bgcolor="#FFFFFF"><table width="190" border="0" cellpadding="9" cellspacing="0">
<tr>
<td width="190" height="200" align="center" valign="middle" bgcolor="#f3f3f3"><a href="#"><img src="http://www.kevin.nl/test/img/flower170px.jpg" width="170" height="128" border="0" style="display:block"></a></td>
</tr>
</table></td>
</tr></table>
<!-- slide end -->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</body>
</html>