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 =“0”属于<table>标记内，而不属于<td>标记或<tr>标记。

Answer 2

哇我甚至无法想象你想要做什么，但要删除大部分间距，请将其添加到<table>标记：

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

Answer 3

如上所述，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嵌套在表格中。这使得复杂的单元格布局更易于管理，并且不太可能破坏。
所有单元格都具有图像的宽度，因此我们不允许单元格之间存在间隙。
图像具有内嵌样式，显示：块;属性。这可以消除不同浏览器和电子邮件客户端中可能出现的图像下方的任何空白。

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

即使cellpadding =“0”，表格中的图像也不对齐

3 个答案: