Как исправить выравнивание таблиц в Yahoo Mail

Хотя многие считают Yahoo устаревшей компанией, их веб-сервис почты по-прежнему остается значимым игроком на рынке. Занимая 4-е место в нашем рейтинге доли рынка почтовых клиентов, Yahoo Mail обладает огромной пользовательской базой. Даже в самых маленьких списках рассылки наверняка есть пользователи Yahoo, что может стать проблемой, когда Yahoo вводит новый баг, влияющий на отображение дизайна писем, как недавняя проблема с версткой в Yahoo Mail.

Именно это произошло несколько месяцев назад, когда дизайнеры электронных писем заметили, что Yahoo перестала правильно выравнивать таблицы.

## Проблема

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

**Left** — выравнивает таблицу по левому краю экрана. **Center** — выравнивает таблицу по центру экрана. **Right** — выравнивает таблицу по правому краю экрана.

Многие дизайнеры используют атрибут align=»center» для центрирования таблиц в своих кампаниях. Это помогает предотвратить прилипание контента к краям окна предварительного просмотра и в целом делает письмо более эстетичным. Это техника, которую мы используем в наших собственных письмах.

К сожалению, некоторое время назад Yahoo обновила свое почтовое приложение и создала баг с атрибутом align. Один из участников нашего сообщества, Марк, выявил проблему, при которой атрибут align=»center» не работает, и таблицы отображаются слева от предполагаемого положения, как показано ниже:

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

## Решение

После нескольких неудачных попыток и хаотичных тестов было найдено решение. Марк Роббинс опубликовал в сообществе способ, использующий CSS-свойство table-layout для исправления проблемы. При применении к самой внешней таблице-контейнеру свойство table-layout со значением «fixed» гарантирует, что атрибут align=»center» будет работать должным образом для любых вложенных таблиц.

### До исправления

«`

«`

### После исправления

«`

«`

К счастью, включение этого CSS-свойства не влияет на то, как другие почтовые клиенты отображают кампании, а значит, его безопасно включать в ваши письма отныне и впредь. Более того, есть основания полагать, что декларация table-layout: fixed; может даже улучшить производительность рендеринга.

С этим обновлением нашего кода вы можете видеть, что наши макеты отображаются именно так, как планировалось!

### Примечание по поводу Safari

После публикации этой статьи один из наших читателей заметил проблему с исправлением при просмотре в Safari:

В ходе расследования мы выяснили, что старые версии Safari, вероятно, не поддерживают свойство table-layout. Я протестировал исправление в Safari 7.0.6, где оно работало безупречно, но в Safari 5.1.10 исправление не сработало — в результате таблицы выровнялись по левому краю.

## Всегда тестируйте свои письма

Недокументированные изменения в почтовых клиентах могут привести к тому, что ваши письма сломаются у подписчиков, поэтому важно тестировать каждую кампанию перед нажатием кнопки «отправить». Litmus позволяет отправлять письма с уверенностью, обеспечивая быстрое тестирование в более чем 50 различных почтовых клиентах.