html emails：如何实现基本布局答案

【问题标题】：html emails: how to implement the basic layouthtml emails：如何实现基本布局
【发布时间】：2018-03-06 20:29:33
【问题描述】：

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

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

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

【问题讨论】：

<img src="banner.jpg" alt="" style="width:100%;max-width:600px;height:auto" width="600" /> 我的建议是去掉width: 100%;。 width="600" 应该适用于 Outlook。一些电子邮件客户端会扩大到 100% 的窗口，这并不总是理想的效果，而 max-width: 600px; 声明不超过 600。
任何答案对你有用吗？
是的，我接受了你的回答，不理解反对意见

标签： html html-table html-email

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

让我知道你的想法。

【讨论】：