如何为所有电子邮件客户端创建“表”响应?

时间:2016-05-31 17:27:57

标签: email responsive-design html-table newsletter

我将为我的简报创建一个表格,但我读到每个客户端的读取方式与代码不同... 所以我希望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>

以下是http://jsfiddle.net/s7n7exst/

你怎么想?

1 个答案:

答案 0 :(得分: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>