Должен ли HTML шаблон электронной почты использовать элемент таблицы для макета?

Question

Я видел несколько примеров HTML шаблонов электронной почты, и все они используют элемент <table> для макета. Есть ли конкретная c причина для использования <table>? Я попытался сделать один без него, и это работает для меня. Должен ли я волноваться, что он может сломаться для кого-то с другим браузером?

Answer 1

Основная причина, по которой таблицы используются до сих пор, - поддержка Outlook 2007/2010/2013. Эти версии используют движок Microsoft Word для рендеринга HTML, и это довольно запутанно. Он имеет ограниченную поддержку CSS (например, без плавающей запятой или позиции), а некоторые свойства CSS поддерживаются только для некоторых указанных c HTML элементов. Например, заполнение поддерживается для a, но не для a. И даже когда вы можете теоретически использовать отступы для более семантических элементов (например, тегов) или использовать вместо них поля для элементов, движок рендеринга Word по-прежнему массивно прослушивается и может иметь непредсказуемое поведение с такими кодами HTML и CSS. Таким образом, разработчикам проще использовать вместо этого.

Но вот в чем дело: если вам не нужно поддерживать Outlook 2007/2010/2013, тогда вы можете полностью отказаться от таблиц и использовать вместо этого более качественный код. И даже если вам нужно это поддерживать, простые макеты из одной колонки могут быть выполнены без таблиц. Причина, по которой ваш шаблон работает в Outlook 2011, заключается в том, что в этой версии (только для Ma c) используется механизм рендеринга WebKit (как в Safari или Apple Mail).

Answer 2

Основная причина, по которой таблицы используются до сих пор, - поддержка Outlook 2007/2010/2013. Эти версии используют движок Microsoft Word для рендеринга HTML, и это довольно запутанно. Он имеет ограниченную поддержку CSS (например, не с плавающей запятой или позицией), а некоторые свойства CSS поддерживаются только для некоторых указанных c HTML элементов. Например, заполнение поддерживается для a, но не для a. И даже когда вы можете теоретически использовать отступы для более семантических элементов (например, тегов) или использовать вместо них поля для элементов, движок рендеринга в Word по-прежнему массивно прослушивается и может иметь непредсказуемое поведение с такими кодами HTML и CSS. Таким образом, разработчикам проще использовать вместо этого.