Электронная почта HTML - разрешено ли colspan?

Ответ 1

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

Ответ 2

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. Вам нужно установить высоту строки в первом столбце, чтобы она учитывала высоты последующих строк. Вот пример этого. Обратите внимание, что первая ячейка в каждой строке пуста.

Ответ 3

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

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

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

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

style="display:block"

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

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

Ответ 4

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

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

Ответ 5

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