HTMLメールで枠がついたコンテンツエリアを作成する

<!-- 枠がついたコンテンツ -->
<tr>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
<td width="560">
<!-- 枠がついたエリアここから -->
<table border="0" cellpadding="0" cellspacing="0" style="border:2px solid #e60012;">
<tr>
<td height="10" style="font-size:0;" colspan="3"></td>
</tr>
<tr>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
<td width="516"><span style="color:#333333;font-size:14px;line-height:150%;">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></td>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
</tr>
<tr>
<td height="10" style="font-size:0;" colspan="3"></td>
</tr>
</table>
<!-- 枠がついたエリアここまで -->
</td>
<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>
</tr>

赤い枠がついたコンテンツエリアを作成します。

<td width="560">
<!-- 枠がついたエリアここから -->
<table border="0" cellpadding="0" cellspacing="0" style="border:2px solid #e60012;">

真ん中の<td>タグの中へさらに<table>タグを追加して、style="border:2px solid #e60012;" とCSSで罫線を設定します。

<tr>
<td height="10" style="font-size:0;" colspan="3"></td>
</tr>

上下に10pxの余白を設定しています。

<td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td>

テキストなどコンテンツを入れる左右に20pxの余白を設定しています（スマホでは10pxになります）

<td width="516"><span style="color:#333333;font-size:14px;line-height:150%;">テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。</span></td>

<td width="516"> 枠の幅分だけ引いて幅を指定しています。
ここにコンテンツを入れるようにしてください。