Электронные письма в формате HTML — пустые таблицы/TR/TD в качестве разделителей

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

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


html html-table html-email
person cqde    schedule 29.09.2011    source источник
comment
Разве вы не можете вместо этого использовать поля CSS, отступы или относительное позиционирование?   -  person Jacob Mattison    schedule 29.09.2011

Ответы (4)


arrow_upward
10
arrow_downward

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

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

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

Таким образом, вам больше никогда не придется использовать проставки. Еще кое-что. В 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>
person Vampola    schedule 09.05.2012
comment
К сожалению, это не работает с приложением Apple Mail (версия 6.3 (1503)). Любые предложения о том, как исправить это там? - person head in the codes; 07.06.2013
comment
Не беспокоиться. Я исправил это в своей таблице шириной в 3 ячейки (пустая, заполненная, пустая), используя &nbsp; в каждой пустой ячейке и добавив строку внизу с одним столбцом, охватывающим все 3 ячейки, используя colspan=3. - person head in the codes; 07.06.2013
comment
Кто-нибудь знает, можем ли мы обойтись без установки ширины пустых td на 100% ширины, чтобы атрибуты родительской таблицы могли иметь один атрибут ширины, чтобы контролировать, насколько широкими должны быть вещи? - person klewis; 19.02.2014

arrow_upward
2
arrow_downward

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

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

Например, если мне нужно пространство высотой 18 пикселей, я бы назначил отступ 7 и высоту 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>
person davidcondrey    schedule 05.12.2013

arrow_upward
1
arrow_downward

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

person Alex Gontcharov    schedule 10.01.2013

arrow_upward
0
arrow_downward

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

person Krazer    schedule 25.04.2012