對齊用於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表格

回答

相關問題