Как сверстать email письмо?

Question

[SeriousAnonymous]

Просьба поделиться опытом верстки на таблицах.
Нужно сделать блок email рассылки такого вида :

Интересует, как разбить на 2 колонки и с правой стороны сделать данные квадраты?
Спасибо.

Comments

[Froggyweb]

table colspan
таблица в таблице.....
странные квадраты вложенный тег в td

[Антон Литвиненко]

то что у вас нарисовано для многих затруднительно обычной версткой сделать, а у писем сотни ограничений, начиная с того что стандартная ширина письма всего 600 пикселей. почтовые клиенты не поддерживают градиент, некоторые не поддерживают бордер-радиус итд. Некоторые вещи, если они не динамические проще всего сделать картинкой.
Но попытка не пытка - попробуйте фреймворк MJML или Fundation for Email, возможно получится

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

[Александр Фалалеев]

Полностью поддерживаю - в email двум колонкам не место (я не противних их, просто это данность данная нам свыше).

Answer 1

[Spaceoddity]

В теории, таблицы для вёрстки рассылок нужны чтобы контент по строкам рассовать, в столбик блоки и без помощи выстроятся.
Т.е. "механизм" прост - для каждой вложенной строки делаете ячейку, в ней таблицу, и в ней уже выстраиваете ячейки горизонтально.

<table>
	<tr>
		<td>
			<table>
				<tr>
					<td>Ячейка 1</td>
				</tr>
			</table>
		</td>
		<td>
			<table>
				<tr>
					<td>Ячейка 2-1-1</td>
					<td>Ячейка 2-1-2</td>
				</tr><!-- здесь таблицу можно закрыть и открыть новую, поскольку строка закончилась, а можно продолжить добавлять строки в эту таблицу -->
				<tr>
					<td>Ячейка 2-2-1</td>
					<td>Ячейка 2-2-2</td>
				</tr>
			</table>
		</td>
	</tr>
</table>

Answer 2

[Pavel-ww]

Взгляните на этот фреймворк для верстки писем https://mjml.io/. Денек покурите документацию и станете асом в верстке email )).
Есть плагин для VS Code и Sublime