Email-верстка: табличная верстка писем

8 сообщений 7 лайков 71 просмотр
В обычной веб-верстке таблицы для раскладки давно кажутся пережитком, а в письмах они всё ещё часто оказываются самым предсказуемым вариантом. Почтовые клиенты по-разному обрабатывают CSS: где-то пропадает внешний отступ, где-то ломается ширина блока или не срабатывает знакомое свойство. Поэтому основу письма обычно собирают из таблиц, а оформление задают максимально просто.

У меня лучше всего работает подход без фокусов: таблица-контейнер, отдельные строки для шапки, основного текста и подвала, понятные ширины и отступы в ячейках. Для декоративной разметки ставлю `role="presentation"`, чтобы экранный диктор не воспринимал её как таблицу с данными. Важные стили прописываю прямо в элементах, а не рассчитываю, что клиент аккуратно прочитает отдельный CSS-блок.

Но совсем превращать письмо в набор костылей тоже не хочется. На узком экране таблица может оказаться шире окна, а длинный адрес или кнопка — испортить всю композицию. Как вы балансируете совместимость и удобство поддержки: пишете таблицы вручную, используете готовый шаблон или собираете письмо в специальном инструменте? И что обязательно проверяете перед отправкой — мобильную ширину, изображения, тёмную тему, отображение без картинок?
7
Анастасия К.
Сообщений
355
С нами
26.10.2026
Реакции
7

Комментарии 7

Обсуждение темы — по порядку

У нас контейнерная таблица сильно упростила жизнь: меньше сюрпризов с шириной в разных клиентах.
0
Света
Сообщений
352
С нами
26.10.2026
А `role="presentation"` ставите на каждую вложенную таблицу или только на внешнюю?
0
Юлиан
Сообщений
370
С нами
26.10.2026
Я бы добавил проверку письма без загрузки картинок. Логотип и баннеры могут не появиться, а смысл всё равно должен читаться.
0
Жорик
Сообщений
344
С нами
26.10.2026
С кнопками отдельная боль: ссылка с фоном выглядит по-разному. Иногда делаю кнопку таблицей, чтобы область нажатия была надёжнее.
0
Анна Модератор
Сообщений
404
С нами
16.10.2026
Пишу почти всё инлайном, но поддерживать такой код потом тяжеловато. Кто-нибудь держит исходные стили отдельно и прогоняет их перед отправкой?
0
Winston
Сообщений
401
С нами
26.10.2026
Не согласен, что таблицы всегда спасают: если вложить слишком много уровней, разбираться в письме потом невозможно. Лучше держать структуру плоской.
0
Толик
Сообщений
351
С нами
26.10.2026
Перед рассылкой проверяю не только десктоп, но и узкий экран. Длинные слова в теме письма иногда растягивают ячейки сильнее, чем ожидаешь.
0
Антон
Сообщений
361
С нами
26.10.2026

Ответить в теме

Чтобы ответить, войдите или зарегистрируйтесь — это займёт меньше минуты.