Письма в формате HTML - Пустые таблицы / TR / TD как разделители

Question

Кто-нибудь имел опыт использования пустых таблиц, строк таблицы или ячеек таблицы в качестве разделителей макета?

Я проверял свою электронную почту в формате HTML в различных почтовых клиентах (Mail, Entourage, Gmail и т. Д.), И Gmail, похоже, по-разному реагирует на пустые ячейки таблицы (не учитывая их вообще). Я возился с использованием "empty-cell: show" в CSS таблицы, а также без пробелов, но все же не повезло. Я определенно хочу избежать использования изображений в качестве разделителей, если это возможно.

Answer 1

Если вы хотите использовать пустые TD-ы вместо проставок, вы должны указать ширину и высоту так:

<td width="111" style="font-size:1px;line-height:21px;">&nbsp;</td>

Здесь вы можете видеть, что я использовал line-height для установки высоты ячейки таблицы, а не height = "21". Это будет правильно отображаться во всех основных браузерах и почтовых клиентах, даже в старых, например, в лотосных заметках. Просто убедитесь, что размер шрифта всегда меньше высоты строки.

Таким образом, вам никогда не придется больше использовать проставки. Еще кое-что. В TR вам не нужно ничего вставлять, кроме случаев, когда внутри TD-ов есть картинки. В Gmail есть некоторые проблемы с отображением изображений, поэтому я исправил это следующим образом:

<tr style="font-size:0px; line-height: 0px;">
<td width="135" valign="top" align="left" height="120" >
<img width="135" height="120" border="0" alt="" src="image source here">
</td>
</tr>

Answer 2

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

Чтобы еще больше улучшить совместимость, лучше всего определить необходимые размеры, используя, главным образом, cellpadding и наименьшее количество высоты в строке, но более 3 пикселей.Значение td должно быть больше 3px, потому что все, что меньше 3px, может быть проигнорировано.Но оно должно быть близко к 3 px, потому что если вы получите ваши размеры с помощью cellpadding, cellpadding будет более уважаемым, чем высота строки.

Например, если мне нужно пространство высотой 18px, я бы назначил cellpadding7 и тд высота 4, которая выходит на (7 * 2) + 4 = 18.

<table border="0" cellpadding="7" cellspacing="0" width="100%">
    <tr>
        <td height="4">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Answer 3

Хорошо с использованием & NBSP;вместо проставки вы всегда задаете высоту строки с помощью тега стиля, если вы не используете & nbsp;по умолчанию будет 20px line-height.

Answer 4

Используйте  , чтобы «заполнить» пространство в пустой ячейке.