ベース編に続きまして、いよいよHTMLメール本文を作成する基礎編です。懐かしのテーブルコーディングです。かれこれ10年以上コーディングされている方は、テーブルコーディング懐かしいなーと思い出していただければと思います。若い人、主に20代の人たちにテーブルコーディングなんてしたことがないと言われ、ジェネレーションギャップ！と衝撃を受けました笑。時代を感じますね…

それでは気を取り直しまして、以下より基本的なテーブルコーディングについて説明していきます。
（説明が長くなってしまったので、基礎編は2回に分けて掲載させていただきます。基礎編2は後日公開します）

基礎編1（2018年10月末検証時の情報です）

今回は600px幅のHTMLメールを作ります。スマホで見た時は画面幅いっぱいに文字サイズなど最適化された状態で表示されます。
基礎編のソースはベース編の最後、bodyタグ内の <!– ここにHTML本文が入ります。 –> に記述してください。

プリヘッダー

<!-- プリヘッダー -->
<table border="0" align="center" cellpadding="0" cellspacing="0" style="max-width:600px;">
<tr>
<td style="width:0;min-height:0;mso-hide:all;font-size:0;"><span style="color:#f3f3f3;font-size:0;line-height:0;">プリヘッダーが入ります。</span></td>
</tr>
</table>

最初にプリヘッダーを設定します。プリヘッダーとは、メールの一覧画面で件名の後ろや下に表示されるものです。

モバイルデバイスでのメール閲覧が増えた今、開封率をあげるためには、件名と同じくらい重要な要素となっています。届いたメールがどのようなコンテンツなのか、興味を持たせるためのテキスト情報を設定することをお勧めします。
プリヘッダーを設定しない場合は、bodyタグ内にある一番初めの本文または画像のaltが表示されます。
Outlook2010、Thunderbird、Yahoo!メール、Yahoo!メールアプリはプリヘッダーが表示されない仕様となっています。

・tableタグ

widthは指定しないでください。指定してしまうとスマホで見た時に文字サイズなどが最適化されません。
styleの max-width:600px; で最大幅を設定しています。

・tdタグ

プリヘッダーは本文には表示させないもののため、CSSで表示されないようにしています。display:none; は効かないメーラーがありますので以下のCSSを指定しています。
width:0;min-height:0;　ブラウザのGmailで非表示にする。
mso-hide:all;　Outlook2010・2013で非表示にする。
font-size:0;　行の高さを消す。

・spanタグ

color:#f3f3f3;　tdタグに mso-hide:all; を指定していても、Outlook2010・2013で1pxぐらい何かが表示されているように見えます。そのため、文字色に背景色 #f3f3f3 と同じ色を指定して見えないようにしています。（背景色についてはベース編のbodyタグ、divタグを参照ください）
font-size:0;line-height:0;　行の高さを消す。tdタグのCSSが効かないメーラー用に2重の対策をしています。

なお、プリヘッダーのテキスト量は端末やメーラーの幅によって異なります。1行表示のものもあれば2行表示するものもあり、だいたい20～60文字程度となります。

正しく表示されない方向けのリンクテキスト

<!-- 正しく表示されない方はこちらをクリックしてください。 -->
<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="max-width:600px;line-height:100%;">
<tr>
<td style="font-size:0;"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" class="space"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
<tr>
<td width="600" align="right"><span style="color:#999999;font-size:11px;line-height:120%;">正しく表示されない方は<a href="#" target="_blank" style="color:#999999;text-decoration:underline;">こちら</a>をクリックしてください。</span></td>
</tr>
<tr>
<td style="font-size:0;"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" class="space"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
</table>

次にHTMLメールが正しく表示されない方向けの閲覧用にWebページを用意する場合は、リンクテキストを設定します。

・tableタグ

コンテンツエリアの背景色は白とします。CSSが効かないメーラーを考慮して bgcolor=”#ffffff” で指定しています。
行間の調整をするために line-height:100%; を指定しています。

・tdタグ

style=”font-size:0;”　画像を入れるtdタグに指定してください。画像の下に出来る余白を消します。line-height:0; はOutlook2010・2013で画像の上部が1px欠けるため、使用しないようにしています。
width=”600″　Outlook2010・2013はCSSが効かないので、tdタグにコンテンツ幅の最大値を設定します。
align=”right”　左寄せ、センタリング、右寄せにする際は align で指定してください。

・imgタグ

style=”display:block;”　画像の下に出来る余白を消します。tdタグのCSSが効かないメーラー用に2重の対策をしています。
例では画像のパスを相対パスにしていますが（長くなるので）、配信時にはhttpまたはhttpsから始まる絶対パスへ変更してください。Web上にないものは表示されません。

・spanタグ

color:#999999;font-size:11px;line-height:120%;　テキストの色、サイズなどを調整する場合はspanタグにCSSを設定してください。

・aタグ

href=”#”　httpまたはhttpsから始まるWebページを指定してください。
target=”_blank”　リンク先は別ウィンドウで開くのが適切ですので設定してください。
color:#999999;　文字色を指定してください。指定しない場合、メーラーのデフォルト色（主に青い文字）になります。spanタグで指定したカラーは適用されません。
text-decoration:underline;　メーラーによって下線があったりなかったりするので、リンクしていることがわかるように下線を表示させます。

・スペーサー（spacer.gif）について

スペーサーの高さを確保するには、imgタグのheightで高さを設定しなければなりません。PC用に確保した高さではスマホで見た時に少し高さが多いように見えるため、スペーサーを2分割し、スペーサー2つ目のtdタグに class=”space” をつけています。これはiPhoneのメールアプリやGmailアプリで非表示にするための class です。今回の場合、スペーサーの高さはPCでは20px、スマホでは10pxとなります。もしPCもスマホも同じ高さで良ければ1つ目だけを記述してください。heightの数値は適宜変更してください。
CSSのpaddingなどで余白を調整するとメーラーによっては表示崩れの原因となるため、スペーサーの使用を推奨しています。

スペーサーの例

<!-- PC・スマホで高さを変える場合 -->
<tr>
<td style="font-size:0;"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>
<tr>
<td style="font-size:0;" class="space"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>

 
<!-- PC・スマホ共通 -->
<tr>
<td style="font-size:0;"><img src="img/spacer.gif" alt="" width="1" height="10" style="display:block;"></td>
</tr>

基礎編1はここまでとなります。
ここに書いたtableタグ、tdタグなどを流用すればあとは簡単に組めてしまうのですが、他にも細かい注意点はありますので基礎編2にて、画像、テキスト、ボタンなどのレイアウトを説明したいと思います。