如何用纯HTML实现邮件模板底部两张可点击图片并排？

完全不懂HTML，制作邮件模板时遇到问题：需要在现有hero图下方放置两张可点击的并排图片，但始终无法实现。以下是已有的hero图代码：

<tr>
  <td class="hero" style="border-collapse: collapse; border-spacing: 0px; margin: 0px; padding: 0px;" align="center" valign="top">
    <a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
      <img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0px; outline: currentcolor none medium; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
    </a>
  </td>
</tr>

解决方案 #

邮件模板的布局必须依赖表格实现（绝大多数邮件客户端不支持现代CSS布局），在你的hero图表格行后添加一个新的表格行，用两个单元格分别承载图片即可，具体代码如下：

<!-- 原有hero图代码 -->
<tr>
  <td class="hero" style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 0;" align="center" valign="top">
    <a title="placeholdertext" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener">
      <img class="fr-dib" style="width: 620px; max-width: 560px; color: #000000; font-size: 13px; padding: 0; outline: none; text-decoration: none;" title="rick roll" src="test_mail_f.jpg" alt="rick roll" width="560" height="349" border="0" />
    </a>
  </td>
</tr>

<!-- 新增的并排可点击图片行 -->
<tr>
  <!-- 第一张图片单元格 -->
  <td style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 10px 5px 0; width: 50%;" align="center" valign="top">
    <a href="你的第一张图片跳转链接" target="_blank" rel="noopener">
      <img style="width: 100%; max-width: 275px; padding: 0; border: 0;" src="第一张图片地址" alt="第一张图片描述" width="275" />
    </a>
  </td>
  <!-- 第二张图片单元格 -->
  <td style="border-collapse: collapse; border-spacing: 0; margin: 0; padding: 10px 5px 0; width: 50%;" align="center" valign="top">
    <a href="你的第二张图片跳转链接" target="_blank" rel="noopener">
      <img style="width: 100%; max-width: 275px; padding: 0; border: 0;" src="第二张图片地址" alt="第二张图片描述" width="275" />
    </a>
  </td>
</tr>

关键注意事项 #

• 每个图片放在独立的<td>中，设置width:50%保证两张图各占一半宽度
• 给<td>加少量padding避免两张图紧贴在一起
• 图片设置width:100%+max-width，保证在不同屏幕尺寸下自适应显示
• 所有样式必须写在元素的style属性里（邮件客户端不支持外部样式表或头部样式标签）
• 图片保留border:0，避免加载时出现默认边框

入门学习要点 #

针对完全不懂HTML的情况，从邮件模板入门要抓核心：

1. 布局只用表格：忘掉网页的div、flex、grid，所有布局都靠<table>、<tr>、<td>实现
2. 样式全写内联：所有CSS样式直接写在元素的style属性中，不要用外部文件
3. 优先考虑兼容性：邮件客户端（如Outlook、Gmail）对HTML/CSS支持有限，只使用基础属性
4. 图片必填属性：所有图片必须加alt文本，设置固定宽度+自适应规则，避免加载失败后布局混乱
5. 写完必测试：将模板发送到自己的常用邮箱，查看不同客户端的显示效果

内容的提问来源于stack exchange，提问作者hobogoblin