表格中的图像不对齐，甚至与cellpadding="0“也不对齐

Question

我在一个表格中有几张图片(这是一封电子邮件，所以我不得不使用表格)，即使我使用了cellpadding=0，它们也不会对齐。有什么想法吗？

<table>
 <tbody>
    <tr>
  <td cellpadding="0" colspan="5"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_01.gif" alt="" width="444" height="43" /></td>
</tr>
<tr cellpadding="0">
  <td cellpadding="0" rowspan="4"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_02.gif" alt="" width="46" height="252" /></td>
  <td cellpadding="0" colspan="3"><img src="http://www.tradetech.net/images/Holidayemail/boxes.gif" alt="" width="296" height="142" /></td>
  <td cellpadding="0" rowspan="4"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_04.gif" alt="" width="102" height="252" /></td>
</tr>
<tr cellpadding="0">
  <td cellpadding="0" colspan="3"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_05.gif" alt="" width="296" height="33" /></td>
</tr>
<tr cellpadding="0">
  <td cellpadding="0" rowspan="2"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_06.gif" alt="" width="32" height="77" /></td>
  <td cellpadding="0"><img src="http://www.tradetech.net/images/Holidayemail/greeting.gif" alt="" width="151" height="29" /></td>
  <td cellpadding="0" rowspan="2"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_08.gif" alt="" width="113" height="77" /></td>
</tr>
<tr cellpadding="0">
  <td cellpadding="0"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_09.gif" alt="" width="151" height="48" /></td>
</tr>
</tbody>
 </table>

Answer 1

正如上面所述，Cellpadding不会在标记上做任何事情，因为您正在创建一个HTML电子邮件，您需要设置标记的宽度，使其不允许任何空间移动。仅仅添加图片是没有帮助的。

我已经创建了一个小提琴，将布局中的图像完美地排成一行：http://jsfiddle.net/Scopestyle/6Qva2/

<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">

    <table width="444" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td colspan="3"><img style="display: block;" src="http://placehold.it/444x43" alt="" width="444" height="43" /></td>
      </tr>
      <tr>
        <td width="46" rowspan="3" valign="top"><img style="display: block;" src="http://placehold.it/46x252" alt="" width="46" height="252" /></td>
        <td width="296"><img style="display: block;" src="http://placehold.it/296x142" alt="" width="296" height="142" /></td>
        <td width="102" rowspan="3" valign="top"><img style="display: block;" src="http://placehold.it/102x252" alt="" width="102" height="252" /></td>
      </tr>
      <tr>
        <td><img style="display: block;" src="http://placehold.it/296x33" alt="" width="296" height="33" /></td>
      </tr>
      <tr>
        <td width="296" valign="top">
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="32" rowspan="2"><img style="display: block;" src="http://placehold.it/32x77" alt="" width="32" height="77" /></td>
                <td width="151"><img style="display: block;" src="http://placehold.it/151x29" alt="" width="151" height="29" /></td>
                <td width="113" rowspan="2"><img style="display: block;" src="http://placehold.it/113x77" alt="" width="113" height="77" /></td>
              </tr>
              <tr>
                <td width="151"><img style="display: block;" src="http://placehold.it/151x48" alt="" width="151" height="48" /></td>
              </tr>
            </table>

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

</td>

如果你看一下代码，你会注意到我用来让它工作的几个技巧：

HTML

• 嵌套在表格中。这使得复杂的单元格布局更容易管理，更不容易中断。

• 所有单元格都具有图像的宽度，因此我们不允许单元格之间有间隙。

• 图像具有带有display: block；属性的内联样式。这将中和图像下方可能在不同浏览器和电子邮件客户端中出现的任何间隙。

在测试您的电子邮件代码时，putsmail.com是一个方便的工具，可以查看它在收件箱中的样子。在调试不同的电子邮件客户端时，请查看emailology.org以获得有趣的提示。

Answer 2

cellpadding="0“属于<table>标记，而不是<td>标记或<tr>标记。

Answer 3

哇，我甚至不能想象你想要做什么，但是为了去掉大部分的空格，把这个添加到<table>标签中：

 <table cellpadding="0" cellspacing="0" border="0">