Изображения в таблице не выравниваются, даже с 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 = "0" принадлежит тегу <table>, а не тегу <td> или тегу <tr>.

Answer 2

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>

Если вы посмотрите на код, обратите внимание на несколько уловок, которые я использовал, чтобы заставить его работать:

1. HTML-код вложен в таблицы. Это облегчает управление сложными макетами ячеек и снижает вероятность их поломки.
2. Все ячейки имеют ширину изображений, поэтому мы не допускаем промежутков между ячейками.
3. Изображения имеют встроенные стили с отображением: блок; приписывать. Это нейтрализует любые пробелы под изображением, которые могут возникнуть в разных браузерах и почтовых клиентах.

При проверке кода вашей электронной почты putmail.com - это удобный инструмент, позволяющий увидеть, как он выглядит в вашем почтовом ящике. При отладке различных почтовых клиентов обращайтесь к emailology.org за интересными советами.

Answer 3

вау, я даже не представляю, что вы пытаетесь сделать, но для удаления большей части пробела добавьте это к тегу <table>:

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