2015-10-09 139 views
0

尝试使用令人难以置信的90年代风格表格布局技术为Outlook构建电子邮件模板(不需要在任何其他电子邮件客户端上工作)。对齐用于Outlook电子邮件的HTML表格

我的HTML在下面,我想要的是“支持内容”部分与“新发布”部分垂直对齐。我不能想办法做到这一点,除了使用垂直对齐CSS属性,但前景不支持这一点。

任何想法的人?

<table cellspacing="0" cellpadding="10" border="0"> 

<tr> 

<td width="80%"> 
    main content 
    <table cellspacing="0" cellpadding="10" border="0"> 
     <tr> 
     <td width="100%"> 
      New launches 
      </td> 
        </tr> 
     <tr> 
     <td width = "50%"> 
      launch 1. launch one information blah blah blah 
      </td> 
      <td width = "50%"> 
      launch 1 images, lots of images here, blah blah 
      </td> 
     </tr> 
     <tr> 
     <td width = "50%"> 
      launch 2. launch one information blah blah blah 
      </td> 
      <td width = "50%"> 
      launch 2 images, lots of images here, blah blah 
      </td> 
     </tr> 
     <tr> 
     <td width = "50%"> 
      launch 3. launch one information blah blah blah 
      </td> 
      <td width = "50%"> 
      launch 3 images, lots of images here, blah blah 
      </td> 
     </tr> 
<td width="100%"> 
      completed tests 
      </td> 
        </tr> 
     <tr> 
     <td width = "50%"> 
      completed 1. launch one information blah blah blah 
      </td> 
      <td width = "50%"> 
      completed 1 images, lots of images here, blah blah 
      </td> 
     </tr> 
     <tr> 
     <td width = "50%"> 
      completed 2. launch one information blah blah blah 
      </td> 
      <td width = "50%"> 
      completed 2 images, lots of images here, blah blah 
      </td> 
     </tr> 
     <tr> 
     <td width = "50%"> 
      completed 3. launch one information blah blah blah 
      </td> 
      <td width = "50%"> 
      completed 3 images, lots of images here, blah blah 
      </td> 
     </tr> 

    </table> 

    </td> 

<td width="20%" vertical-align = "top"> 
    supporting content 
    <table cellspacing="0" cellpadding="10" border="0"> 
     <tr> 
     <td width = "100%"> 
      supporting content section 1 
      </td> 
     <td width = "100%"> 
      supporting content section 2 
      </td> 
     </tr> 
    </table> 

     </tr> 

    </td> 

</tr> 

</table> 
+0

你的CSS在哪里? – Siyah

+0

我还没有添加任何,只是想让我的布局工作之前,我让它看起来不错 – Ash

+0

@Siyah对不起,我只是使用到目前为止在HTML – Ash

回答

1

您需要使用style属性,如:

<td style="width:20%; vertical-align:top" > 
+0

内联的css即时通讯,正如我所提到的,我试过垂直对齐并且在outlook dhisani中不支持outlook – Ash

+0

啊,你是绝对正确的。在这里,我的头撞到墙上的错误轻微敲打。非常好,非常感谢你 – Ash

+0

好的,我把你的代码粘贴在小提琴上,它没有对齐到顶部,但是在我使用'style'属性后,它就起作用了。猜测前景可能表现相同 – Dumisani

2

有没有这样的html属性为 “垂直对齐”,它的CSS之一。尝试

<td width="20%" valign="top"> 

那一个为我工作(只要石蕊显示),无论是桌面应用程序和网络邮件

在HTML中发现
1

一些错误

<td width="100%"> 
    completed tests 
</td> 

没有开始<tr>标签


<td width="20%" vertical-align="top"> 
    supporting content 

不具有匹配的结束</td> [它收到匹配</td>一个</tr>]

使上述更正后,改变

<td width="80%"> 
    main content 

<td width="80%" valign="top"> <!-- note the added valign="top" --> 
    main content 

<td width="20%"> 
    supporting content 

to

<td width="20%" valign="top"> 
    supporting content 
相关问题