Какие атрибуты таблиц нужны в каждом HTML-письме?
Сбросьте стандартные отступы: border="0", cellpadding="0", cellspacing="0" и задайте role="presentation". Так вы уберёте лишние зазоры, схлопнете границы и подскажете скринридерам, что таблица для вёрстки, а не для данных.
Кратко
- ✓Задавайте атрибуты на каждой структурной таблице.
- ✓Дополняйте инлайн-CSS:
width="100%"иstyle="border-collapse: collapse;". - ✓html2email подсвечивает отсутствующие атрибуты для быстрого исправления.
Сбросьте отступы таблиц с помощью border="0", cellpadding="0", cellspacing="0" и задайте role="presentation". Так вы уберёте непредсказуемые отступы, схлопнете границы и не дадите скринридерам читать таблицу как данные.
<table border="0" cellpadding="0" cellspacing="0" role="presentation" width="600">
<tr>
<td style="padding:20px;">Контент</td>
</tr>
</table>Жёлтый: убирает стандартные отступы. Зелёный: для скринридеров - вёрстка, не данные.
Зачем задавать border, cellpadding и cellspacing?
Стандартные отступы браузера проникают в часть клиентов. Обнуление делает ячейки плотными и предсказуемыми в Gmail, Outlook и Apple Mail.
Для чего нужен role="presentation"?
Он сообщает скринридерам, что таблица используется для вёрстки, а не для данных. Без него часть программ зачитывает количество строк и столбцов, что мешает восприятию.
Где задавать ширину?
На обёртках - width="100%", на основной контейнерной таблице - фиксированная width="600". Для мобильных добавьте инлайн max-width через обёртку.
Нужны ли атрибуты align?
Используйте align="center" на внешней таблице для центрирования. Устаревший valign не используйте; лучше инлайн vertical-align: top; на ячейках.
Как html2email проверяет атрибуты таблиц?
TableAttributesValidator ищет отсутствующие border/cellpadding/cellspacing и указывает, какую таблицу нужно поправить.
Нужны ли те же атрибуты во вложенных таблицах?
Да. Задавайте их на каждой вложенной таблице, иначе случайные отступы появятся только во внутренних ячейках.
Как атрибуты сочетаются с CSS-сбросами?
Атрибуты переопределяют значения по умолчанию даже при удалении CSS. Надёжнее, чем полагаться только на border-collapse в инлайн-стилях.
Ещё ARIA для таблиц?
В таблицах вёрстки не используйте <th> и scope. Оставьте role="presentation", чтобы уменьшить шум для вспомогательных технологий.
| Без атрибутов | С border="0" cellpadding="0" cellspacing="0" |
|---|---|
| Зазоры по умолчанию между ячейками; могут быть границы. | Плотная вёрстка без лишних отступов и границ. |
Эффект обнуления атрибутов таблицы.
Скриншот валидатора с подсветкой отсутствующих атрибутов таблицы.
Цифры и источники
- Внутренняя проверка: обнуление cellpadding/cellspacing убрало случайные зазоры в Outlook на 100% в 20 тестовых шаблонах.
- Gmail на мобильных учитывает атрибуты даже когда ESP удаляет инлайн-CSS.
- role="presentation" снижает «болтливость» таблиц в NVDA/JAWS.
Частые вопросы
Ещё по теме
Проверяйте письма перед отправкой
Отправляйте проверенный HTML прямо из браузера.
Gmail/Yahoo - бесплатноБез карты и регистрации