Как верстать письма с таблицами и сравнениями
Таблицы в письмах — один из самых полезных форматов для определённых задач. Сравнение тарифов, прайс‑лист, характеристики товара, расписание — всё это нагляднее в таблице, чем в тексте. Но верстать таблицы в email сложнее, чем в браузере: почтовые клиенты поддерживают CSS неравномерно, а на мобильном широкая таблица просто выезжает за экран.
Когда таблица уместна
Таблица в письме оправдана, когда данные нужно сравнивать по нескольким параметрам одновременно. Три тарифных плана с разными функциями — таблица. Один тариф с описанием — список.
Когда таблица помогает: сравнение тарифов или продуктов, прайс‑лист с несколькими параметрами, расписание мероприятий, технические характеристики.
Когда таблица лишняя: перечисление без сравнения, данные с одним параметром, контент, который лучше читается как текст.
Особенности вёрстки таблиц в email
Email-вёрстка строится на HTML-таблицах — это стандарт, который поддерживается во всех почтовых клиентах. Но таблицы для данных (не для структуры письма) требуют отдельного подхода.
Фиксированная ширина. Письмо имеет ширину 600 пикселей. Таблица с данными должна вписываться в эту ширину. Если колонок много, таблица выедет за пределы экрана — особенно на мобильном.
Инлайн‑стили. Многие почтовые клиенты игнорируют внешние CSS-файлы и блочные стили. Все стили таблицы нужно прописывать инлайн — прямо в атрибутах тегов.
Cellpadding и cellspacing. Эти атрибуты задаются прямо в теге <table>, а не через CSS — для совместимости с Outlook.
Базовая структура таблицы для письма:
html
<table width=»100%» cellpadding=»12″ cellspacing=»0″ border=»0″
style=»border-collapse: collapse;»>
<tr>
<th style=»background-color: #f4f4f4; text-align: left;
font-size: 14px; padding: 12px;»>Параметр</th>
<th style=»background-color: #f4f4f4; text-align: left;
font-size: 14px; padding: 12px;»>Базовый</th>
<th style=»background-color: #f4f4f4; text-align: left;
font-size: 14px; padding: 12px;»>Профи</th>
</tr>
<tr>
<td style=»border-bottom: 1px solid #eeeeee;
padding: 12px; font-size: 14px;»>Хранилище</td>
<td style=»border-bottom: 1px solid #eeeeee;
padding: 12px; font-size: 14px;»>5 ГБ</td>
<td style=»border-bottom: 1px solid #eeeeee;
padding: 12px; font-size: 14px;»>50 ГБ</td>
</tr>
</table>
Таблица сравнения тарифов
Таблица тарифов — самый популярный формат в B2B и SaaS-рассылках. Несколько рекомендаций.
Выделяйте рекомендуемый вариант. Один тариф должен визуально выделяться: другой цвет фона заголовка, рамка, пометка «Популярный». Это направляет выбор читателя.
Не больше трёх‑четырёх колонок. Больше — таблица становится нечитаемой на мобильном. Если тарифов больше, лучше дать ссылку на страницу сравнения на сайте.
Используйте иконки вместо текста там, где возможно. Галочка для «включено» и крестик для «не включено» читаются быстрее, чем «да» и «нет».
Кнопка под каждым тарифом. Читатель должен сразу попасть на нужный тариф, а не на общую страницу.
Письмо Democo сравнивает два тарифа через карточки, а не таблицу. Каждая карточка — отдельный блок с ценой, списком функций и кнопкой. На мобильном такой формат адаптируется лучше, чем многоколоночная таблица.
Адаптация таблицы под мобильный
Таблица с тремя‑четырьмя колонками не помещается на экране телефона. Есть несколько стратегий.
Горизонтальный скролл. Таблица сохраняет структуру, читатель скроллит вправо. Работает, но неудобно. Подходит только для простых таблиц с небольшим количеством данных.
Вертикальная перестройка через CSS. С помощью медиазапросов строки и колонки перестраиваются в вертикальный список. Каждая строка становится отдельным блоком. Требует поддержки медиазапросов — Gmail на Android и Apple Mail поддерживают, Outlook нет.
Упрощённая версия для мобильного. Две колонки вместо четырёх — оставляете только самые важные параметры. Остальное через ссылку «Полное сравнение на сайте».
Карточки вместо таблицы. Каждый тариф — отдельный блок‑карточка, которые на мобильном выстраиваются в столбик. Это самый надёжный подход — не требует сложного CSS и работает везде.
Прайс‑лист в письме
Прайс‑лист отличается от таблицы сравнения: здесь не сравниваются варианты, а перечисляются товары или услуги с ценами.
Несколько форматов.
Таблица с ценами. Название, краткое описание, цена. Простая структура, которая работает для услуг и нефизических товаров.
Карточки товаров. Изображение, название, цена, кнопка. Стандарт для интернет‑магазинов. Легче адаптируется под мобильный, чем таблица.
Список с ценами. Если товаров много и изображения не нужны — простой список с ценами работает лучше, чем перегруженная таблица.
Цены в письме должны быть актуальными на момент отправки. Если цена изменилась после отправки — добавьте на посадочной странице оговорку, что цена в письме могла устареть.
Итог
Таблица в письме работает, когда данных много и их нужно сравнивать. Верстайте через инлайн‑стили, ограничивайте количество колонок и всегда проверяйте на мобильном. Если таблица не помещается на узком экране — карточки надёжнее.
Читайте также: