HTMLメールの基本はテーブルレイアウトだ。と言うことは調べたら出てきます。
でも画像を入れると横並びで幅が指定できないなんて聞いてないよ！？
と言う訳で実際にできなかった事をメモメモします。
↓こんな感じにしたかった↓
画像が左にあって最大の横幅は200pxで右側に文章が入る
そんな風にしたかった・・・
実際にテスト送信を行ってみたところ・・・
PCのgmailでは大丈夫。
PCのyahooでも大丈夫。
スマホのyahooでも大丈夫。
スマホのgmailは・・・
こんな感じになってしまった↓
あれ！？
画像どうした！？
なんでだ？ネットで見つけた綺麗なテンプレートを参考に作成したはずなのに？？
なぜだと思いますか？
下に崩れた部分を載せさせていただきます。
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td width="600" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" width="600">
<tr>
<td width="20"></td>
<td width="560">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" width="560">
<tr>
<td width="200" style="overflow: hidden;">
<img src="https://kawakami1592.github.io/tuku-ru/images/pexels-josh-sorenson-68342.jpg" width="200" height="200" alt="商品画像" border="0" style="object-fit: contain;">
</td>
<td width="20"></td>
<td width="340">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" width="340">
<tr>
<td align="left">
サンプル
</td>
</tr>
<tr>
<td align="left">
サンプル
</td>
</tr>
<tr>
<td align="left">
サンプル
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>
修正したものがこちら↓
<table cellspacing="0" cellpadding="0" border="0" width="600">
<tr>
<td width="600" bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" width="600">
<tr>
<td width="20"></td>
<td width="560">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" width="560">
<tr>
<td width="200" style="overflow: hidden;">
<img src="https://kawakami1592.github.io/tuku-ru/images/pexels-josh-sorenson-68342.jpg" width="200" height="200" alt="商品画像" border="0" style="object-fit: contain;">
</td>
<td width="20"></td>
<td width="340">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" width="340">
<tr>
<td align="left">
<span style="width:340px; display:inline-block;">
サンプル
</span>
</td>
</tr>
<tr>
<td align="left">
<span style="width:340px; display:inline-block;">
サンプル
</span>
</td>
</tr>
<tr>
<td align="left">
<span style="width:340px; display:inline-block;">
サンプル
</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>
お分りいただけましたでしょうか？
<span style="width:340px; display:inline-block;">
これを追加しただけです。
どうやらスマホ（アプリ）のgmailでは画像を入れると幅の指定が崩れるらしいのです。
右側にも画像を貼れば期待どうりの表示ができますが、そうでないときはimgタグと同じインラインで幅を指定すればよかったのです。
とはいえ本来インラインは幅を指定できませんからインラインブロックにしておきました。
以上です