html 电子邮件中的居中嵌套表格

Question

如何将所有 child table 居中放置在主要 parent table 的中间？在标题之间添加 10px 边距或填充的每个标题之间的蓝色条的最佳方法是什么？

<table width="600" border="1" cellpadding="10" cellspacing="0" align="center">
  <tr>
    <td>
      <table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
        <tr>
          <td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one
            <br />headline</td>
          <td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
        </tr>
      </table>
      <table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
        <tr>
          <td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two
            <br />headline</td>
          <td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
        </tr>
      </table>
      <table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
        <tr>
          <td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three
            <br />headline</td>
        </tr>
      </table>
      
    </td>
  </tr>
</table>

Answer 1

您可以在较小的 table 周围添加父级 table，为其指定宽度并将其居中。如果你愿意，你可以给 table 一个宽度（所有子 tables 的总和）width="285" 在这种情况下或者没有宽度，都可以。试试下面的代码：

<table width="600" border="1" cellpadding="10" cellspacing="0" align="center">
  <tr>
    <td>
      <table border="0" cellpadding="10" cellspacing="0" align="center">
        <tr>
          <td>
            
            <table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
        <tr>
          <td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one
            <br />headline</td>
          <td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
        </tr>
      </table>
      <table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
        <tr>
          <td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two
            <br />headline</td>
          <td width="30" align="center"><img src="http://via.placeholder.com/3x30/007cb0" /></td>
        </tr>
      </table>
      <table border="0" align="left" cellpadding="0" cellspacing="0" class="content">
        <tr>
          <td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three
            <br />headline</td>
        </tr>
      </table>

          </td>
        </tr>
      </table>
      
    </td>
  </tr>
</table>

这样做后我注意到的一件事是，如果您使模板具有响应性，您就不必担心菜单，因为它会自行堆叠。

希望这就是您要找的。

Answer 2

td {
  border-right: 4px solid #007cb0;
}

td:last-child {
  border: none;
}

<table width="600" border="0" cellpadding="10" cellspacing="0" align="center">
  <tr>
  
<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline one<br />headline</td>
 
 <td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline two<br />headline</td>


<td style="color: #007cb0;font-weight: bold; text-align: center; font-size: 12px;">headline three<br />headline</td>
  </tr>

</table>

html 电子邮件中的居中嵌套表格

Center nested tables in html Email

html

html-table

html-email