对齐用于Outlook电子邮件的HTML表格

尝试使用令人难以置信的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>

来源

2015-10-09 Ash

你的CSS在哪里？ – Siyah

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

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

您需要使用style属性，如：

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

来源

2015-10-09 09:43:56 Dumisani

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

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

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

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

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

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

在HTML中发现

来源

2015-10-09 09:45:43

一些错误

<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

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

来源

2015-10-09 09:56:34

对齐用于Outlook电子邮件的HTML表格

回答

相关问题