Question

尝试使用令人难以置信的令人沮丧的90年代样式表布局技术为outlook构建电子邮件模板（不需要在任何其他电子邮件客户端上工作）。

我的HTML在下面，我想要的是“支持内容”部分与“新发布”部分垂直对齐。除了使用vertical align css属性之外，我无法想到任何方法，但是outlook不支持这个。

任何想法？

 <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>

Answer 1

没有像＃34; vertical-align＆＃34;这样的html属性，它是css one。尝试

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

那个适用于我的（就Litmus而言），适用于桌面应用程序和webmail

Answer 2

您需要使用style属性，例如：

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

Answer 3

您的HTML

中发现的错误很少

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

没有起始<tr>代码

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

没有匹配的结束</td> [在匹配</tr>之前有一个</td>

进行上述更正后，请更改

<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

对齐HTML表以在Outlook电子邮件中使用

3 个答案: