Удаление белого интервала между изображениями в таблице

Я знаю, что это было рассмотрено раньше, но решения не помогли мне - я не программист, но я могу обрабатывать базовый код HTML. Я пытаюсь отправить HTML-адрес электронной почты, который имеет 11 изображений, помещенных в таблицу, чтобы стать одним большим изображением - однако белые строки появляются между строками при отправке.

У меня есть стиль таблицы с border="0" cellpadding="0" cellspacing="0", но это не помогает - может кто-нибудь, пожалуйста, дать мне совет? Кроме того, поскольку я не программист, я не понимаю каких-либо сложных ответов!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled document</title>
</head>
<body>
<!-- Save for Web Slices (toast offer mailer 2.jpg) --> 
<table style="height: 920px;" id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2"><a href="#" onclick="location.href='http://www.metroplan.co.uk/2012/#/4/'; return false;"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_01.jpg" width="236" height="201" border="0" style="border: 0;"></a></td>
<td colspan="3"><a href="#" onclick="location.href='http://www.metroplan.co.uk/2012/#/78/'; return false;"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_02.jpg" width="177" height="201" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="#" onclick="location.href='http://www.metroplan.co.uk/2012/#/10/'; return false;"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_03.jpg" width="237" height="201" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_04.jpg" width="152" height="155"></td>
<td colspan="3"><a href="#" onclick="location.href='http://www.metroplan.co.uk/2012/#/116/'; return false;"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_05.jpg" width="173" height="155" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="#" onclick="location.href='http://www.metroplan.co.uk/2012/#/42/'; return false;"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_06.jpg" width="180" height="155" border="0" style="border: 0;"></a></td>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_07.jpg" width="145" height="155"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_08.jpg" width="650" height="237"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_09.jpg" width="650" height="231"></td>
</tr>
<tr>
<td colspan="3"><a href="#" onclick="location.href='http://www.metroplan.co.uk/'; return false;"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_10.jpg" width="314" height="95" border="0" style="border: 0;"></a></td>
<td colspan="4"><a href="mailto:[email protected]"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_11.jpg" width="336" height="95" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="152" height="1"></td>
<td><img src="images/spacer.gif" width="84" height="1"></td>
<td><img src="images/spacer.gif" width="78" height="1"></td>
<td><img src="images/spacer.gif" width="11" height="1"></td>
<td><img src="images/spacer.gif" width="88" height="1"></td>
<td><img src="images/spacer.gif" width="92" height="1"></td>
<td><img src="images/spacer.gif" width="145" height="1"></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Ответ 1

На изображениях попробуйте использовать

style="display:block"

Он должен работать.

Ответ 2

Из быстрой проверки, которую я только что сделал, похоже, проблема заключается в том, что пустое пространство внутри разметки ячеек занимает какое-то место и делает ячейки более крупными.

Один из способов заключается в том, чтобы установить размер шрифта ячеек равным 0, тем самым устраняя это дополнительное пространство.

Живой тестовый пример с исправленным применением.

В вашем случае попробуйте добавить это в отправляемый HTML-код:

<style type="text/css">
    table td { font-size: 0px; }
</style>

Предполагается, что у вас есть только одна таблица, и все ячейки имеют только изображения, если у вас больше таблиц, тогда укажите эту таблицу id, например. <table id="MyImagesTable"> затем измените на:

#MyImagesTable td { font-size: 0px; }

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

<table border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td style="font-size: 0px;">...</td>
        <td style="font-size: 0px;">...</td>
        <td style="font-size: 0px;">...</td>
    </tr>
    <!-- ...more rows... -->
</table>

Ответ 3

Я также сталкиваюсь с той же проблемой.

Но я попробовал

<img src ="images/xyz.jpg"  style="display:block">

и решил

Ответ 4

Эта проблема распространена на многих почтовых клиентах, просто используйте:

<img style="display:block" />

для каждого изображения в вашем HTML.

Ответ 5

Без фактического просмотра вашего кода я бы предположил, что вы видите пробелы между изображениями, потому что у вас есть реальное пространство между вашими изображениями.

Если у вас есть что-то вроде этого...

<img src="image1.jpg">
<img src="image2.jpg">

Измените его на... (обратите внимание, что между двумя тегами изображения нет места)

<img src="image1.jpg"><img src="image2.jpg">

Если вы размещаете изображения в отдельных ячейках (то есть одно изображение на ячейку), попробуйте поместить CSS border-collapse:collapse...

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">

UPDATE

Как отметил @Shadow, ни одна из частей выше не изменит ситуацию.

Похоже, что FireFox и Chrome имеют дело с изображением, так как текст (по какой-то причине), поэтому его предложение table td { font-size:0px; } - это ИМХО правильный ответ. (IE, похоже, не затрагивает проблему.)

Ответ 6

Многие из них игнорируются некоторыми почтовыми клиентами. Это всегда риск, который вы принимаете в тяжелых графических html-письмах. У вас почти наверняка есть получатели, которые видят это неправильно. Я всегда предлагаю своим клиентам не запрашивать такие проекты электронной почты, которые имеют 6-12 изображений, сгруппированных в таблицу. Тем не менее, всегда будут те, кто настаивает на том, чтобы это было сделано, и даже после того, как я покажу им результаты в нескольких почтовых клиентах, они по-прежнему просят, чтобы это было сделано.

Избегайте его, если можете. К сожалению, на самом деле нет гарантированного исправления.

Если вы отправляете электронное письмо группе получателей, которые находятся в одном и том же почтовом клиенте, вы, вероятно, можете решить ее с помощью одного из приведенных выше кодов, чтобы найти тот, который отвечает ваш почтовый клиент.

Ответ 7

много раз это может быть ошибка пользователя. когда вы нарезаете фотошоп, убедитесь, что ВСЕ СЦЕНЫ ОБРАТНЫ. если есть пробел в 1px, то это все испортит!!!

тоже, вот трюк, который я узнал....

Установите для всех изображений тег border = "0" после alt=""...

если есть ** **, и я имею в виду только , а не

так, например....

попробуйте это и убедитесь, что все изображения имеют border = "0", и все теги имеют заданную ширину, все фрагменты касаются, и у вас должно быть 0 пробелов.