2016-05-31 2 views
0

どのようにすべての電子メールクライアントに応答する "テーブル"を作成しますか?

...だから私はそれがすべての電子メールサービスのために応答する tableを持っていると思い ...私は私の時事通信のためのテーブルを作成しますが、私は、各クライアントが同じではない方法で、コードを読むことを読みます

私は小さな例を作る。..ここ

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-spacing: 0;border-collapse: collapse;vertical-align: top; color: #000000; font-size: 15px; margin-top:25px; font-family: Arial"> 
    <tbody> 
    <tr style="vertical-align: top; height: 40px"> 
     <td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 1px 2px 2px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 125px;"> 
     <!--<![endif]--> 
     Vulcano 
     <!--[if !mso]><!- - --> 
     </td> 
     <td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 2px 2px 1px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 100px;"> 
     Ultima attivita' 
     <!--[if !mso]><!- - --> 
     </td> 
    </tr> 

    <tr style="vertical-align: top"> 
     <td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 1px 1px 2px; border-style: solid; border-color: #a8c1c1 #a8c1c1 #a8c1c1 #769e9e; padding: 3px 3px 3px 5px; width: 125px;"> 
     <!--<![endif]-->Etna 
     <!--[if !mso]><!- - --> 
     </td> 
     <td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 2px 1px 1px; border-style: solid; border-color: #a8c1c1 #769e9e #a8c1c1 #a8c1c1; width: 100px; padding: 3px 0px 3px 8px;"> 
     <!--<![endif]-->2015 
     <!--[if !mso]><!- - --> 
     </td> 
    </tr> 


    <tr style="vertical-align: top"> 
     <td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; border-style: solid; border-color: #769e9e; border-width: 1px 1px 2px 2px; width: 125px; padding: 3px 3px 3px 5px;"> 
     <!--<![endif]--> 
     <!--[if !mso]><!- - --> 
    </td> 
    <td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; border-style: solid; border-color: #769e9e; border-width: 1px 2px 2px 1px; width: 100px; padding: 3px 3px 3px 5px;"> 
     <!--<![endif]--> 
     <!--[if !mso]><!- - --> 
    </td> 
    </tr> 
</tbody> 
</table> 

は考えるyuo何http://jsfiddle.net/s7n7exst/

のですか?

答えて

0

更新:

全体的に、はい - あなたが持っているものに働くだろう。いくつかのOutlookクライアントではテーブルが崩壊してしまい、これに追加し続ければLitmusやEmailOnAcidを使って電子メールをテストして一貫性を保証したいと思うでしょう。

私はカップルの事を修正しました、今これは

<table width="100%" cellspacing="0" cellpadding="0" border="0" style="border-spacing: 0; border-collapse: collapse;vertical-align: top; color: #000000; font-size: 15px; Margin:25px 0 0 0; font-family: Arial"> 

    <tr height="40" style="vertical-align: top; height: 40px"> 
    <td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 1px 2px 2px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 125px;">Vulcano</td> 
    <td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; font-weight: bolder; border-width: 2px 2px 2px 1px; border-style: solid; border-color: #769e9e; text-align: center; padding: 8px 3px 8px 5px; width: 100px;">Ultima attivita'</td> 
    </tr> 

    <tr style="vertical-align: top"> 
    <td valign="middle" style="word-break: break-word;border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 1px 1px 2px; border-style: solid; border-color: #a8c1c1 #a8c1c1 #a8c1c1 #769e9e; padding: 3px 3px 3px 5px; width: 125px;">Etna</td> 
    <td valign="middle" style="word-break: break-word; border-collapse: collapse !important;vertical-align: top; text-align: left; border-width: 1px 2px 1px 1px; border-style: solid; border-color: #a8c1c1 #769e9e #a8c1c1 #a8c1c1; width: 100px; padding: 3px 0px 3px 8px;">2015</td> 
    </tr> 

</table> 
+0

を動作するはずです。しかし、あなたは私の例についてどう思いますか?唯一のCSSのインラインで良いですか? – Borja

+0

@Borja動作しますが、流動的ですが、一部のOutlookクライアントでテーブルが破損する可能性があります –

関連する問題