HTML-адрес электронной почты - разрешен ли colspan?

17

Мне было интересно, если я использую атрибут colspan в таблице HTML, которую я намереваюсь иметь в качестве электронной почты, будут отправлять почтовые клиенты (Outlook и т. д.), понять, что такое colspan, поскольку я прочитал, что это может вызвать проблему с макет?

    
задан CallumVass 14.03.2012 в 08:49
источник
  • Если вы можете убедить своего босса работать в бюджет, я бы предложил использовать сервис Litmus для проверки форматирования электронной почты на нескольких устройствах. –  amphetamachine 06.07.2015 в 16:50

5 ответов

1

Угу. Вся HTML-разметка разрешена в большинстве, если не для всех почтовых клиентов. Когда дело доходит до сценариев, у вас есть проблема, с которой можно бороться, потому что скрипты просто не разрешены большинством, если не всеми почтовыми клиентами.

    
ответ дан DoctorLouie 14.03.2012 в 08:51
  • Хорошо, спасибо за это, я не хочу делать скрипты, просто используя таблицу HTML для раскладки электронной почты :) –  CallumVass 14.03.2012 в 08:53
  • Вы также можете использовать CSS, но постарайтесь свести свои образы к минимуму. Многие люди ставят своих клиентов не загружать изображения при просмотре сообщения электронной почты для обеспечения безопасности или по другим причинам. –  DoctorLouie 14.03.2012 в 08:59
  • В соответствии с этим (9xb.com/blog-2008-12-html-emails-outlook-2007) Outlook 2007 не понимает colspans или rowspans. –  Matt Grande 25.09.2012 в 16:27
  • @MattGrande Эта ссылка не работает. Это также неверно. Outlook поддерживает строки rowspans и colspans. У него просто возникают проблемы с настройкой ширины колпанов, если они находятся в первой строке таблицы. –  John 06.06.2013 в 15:42
  • @BiffBaffBoff Вот ссылка на поддержку CSS в электронной почте –  John 06.06.2013 в 15:43
Показать остальные комментарии
37

Colspan и rowspan полностью поддерживаются во всех основных почтовых клиентах. Они сложнее, но если вы правильно это понимаете, они являются отличным вариантом в сочетании с вложенными таблицами.

Причина, по которой у них плохая репутация, кроме того, что сложность заключается в том, что в Outlook есть определенная причуда, вы должны принять во внимание, иначе ваш макет может сломаться.

Colspan:

В Outlook есть проблема, когда, если вы поместите colspan в первую строку таблицы, это испортит ширину последующих строк. Работа для этого заключается в том, что вам нужно указать ширину вашей ячейки в верхней строке, даже если это пустая строка.

Вот пример:

<!-- the second row in this example will not respect the specified widths in Outlook  -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="600" colspan="3" bgcolor="#757575">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="200" bgcolor="#353535">&nbsp;
    </td>
    <td width="400" bgcolor="#454545">&nbsp;
    </td>
    <td width="200" bgcolor="#555555">&nbsp;
    </td>
  </tr>
</table>


<!-- here is the fix - note the empty row at the top enforces the specified width in Outlook  -->
<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="200">
    </td>
    <td width="400">
    </td>
    <td width="200">
    </td>
  </tr>
  <tr>
    <td width="600" colspan="3" bgcolor="#757575">&nbsp;
    </td>
  </tr>
  <tr>
    <td width="200" bgcolor="#353535">&nbsp;
    </td>
    <td width="400" bgcolor="#454545">&nbsp;
    </td>
    <td width="200" bgcolor="#555555">&nbsp;
    </td>
  </tr>
</table>

RowSpan:

Еще больше избегается, чем colspan - rowspan. Я обнаружил, что он может отображаться более последовательно, чем таблицы вложенности в зависимости от вашей целевой аудитории. Это связано с тем, что строки (в частности, отложенные) не разделяют столько же, сколько таблиц при пересылке электронной почты из Outlook из-за тэгов <p class="msoNormal"> Outlook вокруг них. Эти пробелы особенно неизбежны, если кто-то перенаправляет вашу электронную почту в Gmail .

Следует отметить, что rowpan не работает с Blackberry (который я бы не рассматривал как основной клиент). Так что, как и в любом электронном письме html, вам нужно сыграть в игру с процентами и решить, где вы меньше всего хотите, чтобы он сломался.

Основной пример colspan и rowspan, работающих вместе:

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr><!-- hidden row to establish widths in Outlook -->
    <td width="200">
    </td>
    <td width="200">
    </td>
    <td width="200">
    </td>
  </tr>
  <tr>
    <td width="400" height="200" colspan="2" bgcolor="#333333">...
    </td>
    <td width="200" height="400" rowspan="2" bgcolor="#444444">...
    </td>
  </tr>
  <tr>
    <td width="200" height="400" rowspan="2" bgcolor="#555555">...
    </td>
    <td width="200" height="200" bgcolor="#666666">...
    </td>
    </tr>
    <tr>
    <td width="400" height="200" colspan="2" bgcolor="#777777">...
    </td>
  </tr>
</table>

Чтобы выполнить что-то похожее на это без rowspan / colspan, вам придется разбить прямоугольные ячейки таблицы на маленькие квадраты. Представьте, если верхняя правая ячейка была изображением, перекрывающим заголовок см. Это вопрос для примера в реальном мире . Если вы должны избегать рядов и разбивать изображение логотипа горизонтально в двух сложенных ячейках, это может стать проблематичным, если Outlook делает это msoNormal. Никто не любит шов по образу и подобию.

В html-письме вы всегда можете разбивать изображения по вертикали без риска швов / пробелов, но, как правило, вы всегда должны избегать разбиения изображения по горизонтали. Rowspan помогает избежать этого в сценариях, когда вы хотите накладывать изображения.

Одна последняя заметка - Outlook также имеет одинаковую проблему с rowpan, как и для colspan. Вам нужно установить высоту строки в первом столбце, чтобы она учитывала высоты последующих строк. Ниже приведен пример . Обратите внимание, что первая ячейка в каждой строке пуста.

    
ответ дан John 06.06.2013 в 16:01
  • Блестящий ответ, спасибо за такое подробное объяснение. Это только что разрешило массивную головную боль, которая у меня была с рендерингом Outlook. –  JSancho 07.01.2016 в 11:29
3

Только что думал id добавить немного ввода к вашему вопросу

Colspan можно использовать, но я бы предложил против него. Всякий раз, когда я создаю электронные письма (6 месяцев опыта), я всегда использовал вложенные таблицы. Кроме того, вы можете использовать встроенный css в сообщениях электронной почты, поэтому я буду очень осторожен с использованием разницы и отступов.

Несколько вещей, которые я делаю в каждом письме.

Всегда используйте этот код в каждом изображении на своей странице. Он исправит пространство gmail под ошибкой изображения.

style="display:block"

Также используйте border="0" на любых ссылках изображения, чтобы остановить появление синей границы.

Надеюсь, это поможет!

    
ответ дан Undefined 14.03.2012 в 10:39
2

Другим советом в дополнение к style="display: block" является добавление line-height: 0 на изображение с изображением в - это сортирует ошибку нечетного пробела в Outlook 2007.

Я использую colspans все время, но также, где это возможно, - с помощью таблиц nest - избегайте рядов строк - это кошмар, и когда вы делаете таблицы с гнездами, не переходите слишком безумно и гнездо 4/5 или 6, я нахожу, что начинает гадать вещи вверх.

    
ответ дан mrbirch 16.03.2012 в 13:58
  • У меня есть смешные количества таблиц в шахте. Я обычно имею около 3 вложенных таблиц, прежде чем я даже напишу любой контент lol –  Undefined 16.03.2012 в 16:23
0

Rowspans и Colspans в порядке, но я настоятельно рекомендую вам использовать вложенные таблицы. У вас будут дополнительные строки кода, однако это избавит вас от любых перерывов на других почтовых клиентах.     

ответ дан Sambydev 09.06.2017 в 16:19