Форматирование основного HTML-кода для электронной почты

Question

Я делаю простой рассылку рассылок, который может содержать только базовый HTML, но я догоняю его форматирование. У меня очень мало html-опыта, если бы я мог использовать css, я мог бы это описать, но это означает, что html с низким уровнем, который большинство клиентов электронной почты может отображать правильно.

Это немного код, который я сделал, чтобы получить изображение и кнопку (в положении кнопки 2), выглядящую правильно, но она правильно устанавливает верхнюю и нижнюю кнопки, вот в чем проблема.

<table width="100%" style="text-align:center;"> 
<td> 
<img src="http://localhost/temp/leftpic.png"></td> 
<td> 
<img src="http://localhost/temp/button.png"></td> 
</table> 

Это результат моего дизайна. Если граница внешней границы является границей стола, расположенной по центру страницы.

Можно ли отформатировать что-то относительно близко к этому без использования CSS?

Я ценю любую помощь, приветствия.

Answer 1

Вы можете использовать css, вам просто нужно избегать сторонних файлов. Вам необходимо определить правила CSS в строке, то есть в атрибуте style, поскольку вы уже делаете это для table. Однако ваш HTML недопустим. Вам нужно иметь tr элементов за пределами ваших td элементов, и здорово активно обернуть ваши tr элементами внутри tbody, которые должны быть дочерью вашего table.

К слову: причина, по которой нужно избегать стороннего css в этом случае, заключается в том, что это может испортить дизайн страницы gmail/yahoo.

Answer 2

Что-то вроде этого запустит вас ... Это без CSS и без стилизации (кроме того, что вы изначально).

Хотя вы не указали CSS, но ваша первая линия - это стиль (хотя и встроенный). Вы просто не имели никакого внешнего файла?

Это, как мы привыкли делать макет перед CSS, так это с помощью HTML-таблицы:

<table width="100%" style="text-align:center;" border="1"> 
    <tr> 
<td width="50%"> 
     <img src="http://localhost/temp/leftpic.png" width="390" height="480" /> 
    </td> 
<td> 
    <table> 
     <tr> 
     <td><input type="button" value="bn1" /></td> 
     </tr> 
     <tr> 
     <td><input type="button" value="bn2" /></td> 
     </tr> 
     <tr> 
     <td><input type="button" value="bn3" /></td> 
     </tr> 
    </table> 
    </td> 
    </tr> 
</table> 

Поскольку у вас есть фиксированная высота вашего изображения на левый, вы можете также использовать

<tr height="160"> 

С 160 * 3 = 480 (высота вашего изображения)

Смотрите пример здесь https://jsfiddle.net/on6ytfyn/

Возможно, вы также захотите удалить границу в первой строке кода.