html 电子邮件：如何实现基本布局

Question

我正在尝试为 html 电子邮件模板设计基本布局。我见过的大多数示例都使用主包装器 table；我改为这样写：

 <body>
    <center>
      <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center">
        <tr>
          <td>
            <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center">
              <tr>
                <td>
                  <img src="banner.jpg" alt="" style="width:100%;max-width:600px;height:auto" width="600" />
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
      <table width="600" style="width:100%;max-width:600px;margin: 0 auto" align="center">
        <tr>
          <td width="50%">
            <table align="center">
              <tr>
                <td>
                  <p>content</p>
                </td>
              </tr>
            </table>
          </td>
          <td width="50%">
            <table align="center">
              <tr>
                <td style="text-align:center">
                  <p>content</p>
                </td>
              </tr>
            </table>
          </td>
        </tr>


      </table>
    </center>
</body>

如您所见，第一个 table 用于图像横幅，然后是第二行，而不是另一个单独的 table。方法正确吗？我打算用 section 标签分隔网站。

Answer 1

是的，这是一个完全可行的方法。

Answer 2

我已经采用了您的代码并进行了细微的更改，并添加了@gwally 建议的内容。以下代码适用于所有支持媒体查询的设备（包括 Gmail 应用程序）。试一试代码（运行代码，进入全屏然后调整浏览器大小）看看它是如何工作的。

如果您希望它针对较小的设备，您可以将媒体查询更改为 480px。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Lime in the coconut</title>
 <style type="text/css">
  .container{width:600px;}
  @media only screen and (max-width:601px) {
   .container{width:100% !important;}
   .banner img{width:100% !important; height:auto !important;}
  }
 </style>
</head>

<body>
<center>
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width:600px;margin: 0 auto">
    <tr>
      <td>
        <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:600px;margin: 0 auto">
          <tr>
            <td class="banner">
              <img src="https://i.stack.imgur.com/AKVzJ.png" alt="" style="max-width:600px;height:auto" width="600" />
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" class="container" style="max-width:600px;margin: 0 auto">
    <tr>
      <td width="50%">
        <table border="0" align="center" cellpadding="5" cellspacing="0">
          <tr>
            <td>
              <p>content</p>
            </td>
          </tr>
        </table>
      </td>
      <td width="50%">
        <table border="0" align="center" cellpadding="5" cellspacing="0">
          <tr>
            <td style="text-align:center">
              <p>content</p>
            </td>
          </tr>
        </table>
      </td>
    </tr>


  </table>
</center>

告诉我你的想法。

html 电子邮件：如何实现基本布局

html emails: how to implement the basic layout

html

html-table

html-email