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" bgcolor="#dddddd">
<!-- 背景色がついたエリアここから -->
<table border="0" cellpadding="0" cellspacing="0">
<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="520"><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" bgcolor="#dddddd">
<!-- 背景色がついたエリアここから -->
<table border="0" cellpadding="0" cellspacing="0">

真ん中の<td>タグに bgcolor="#dddddd" を指定して背景色を指定します。
その中へさらに<table>タグを追加して、上下左右の余白をspacer.gifなどを使って設定します。

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

ここにコンテンツを入れるようにしてください。