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">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</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">
</td>
</tr>
<tr>
<td width="200" bgcolor="#353535">
</td>
<td width="400" bgcolor="#454545">
</td>
<td width="200" bgcolor="#555555">
</td>
</tr>
</table>
Rowspan:
Еще более избегается, чем colspan является rowspan.Я обнаружил, что он может отображать более последовательно, чем вложенные таблицы, в зависимости от вашей целевой аудитории.Это связано с тем, что при пересылке электронной почты из Outlook строки (особенно составные) не разделяются так сильно, как таблицы, из-за тегов <p class="msoNormal">, которые Outlook оборачивает вокруг них.Эти пробелы особенно неизбежны, если кто-то перенаправляет вашу электронную почту в Gmail .
Одна вещь, на которую следует обратить внимание, это то, что rowspan, похоже, не работает с 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 выполнял эту обычную работу.Никто не любит шов в их изображении.
В html электронной почте вы всегда можете разделить изображения по вертикали без риска появления швов / разрывов, но, как правило, всегда следует избегать разделения изображения по горизонтали.Rowspan помогает избежать этого в сценариях, когда требуется перекрывающиеся изображения.
Последнее замечание - Outlook также имеет ту же проблему с spanspan, что и с colspan.Вам необходимо установить высоту строки в первом столбце, чтобы она соответствовала высоте последующих составных строк.Вот пример этого .Обратите внимание, что первая ячейка в каждой строке пуста.