Style属性を使用せずにテーブルレイアウト
あるメールに組み込む形でHTMLメールを作成する必要があった。
そして、その HTML には style
属性が使用できなかった。つまり要素の属性、table
要素だと bgcolor
とか width
などを駆使してデザインを作成しなければならなかった。(しかも要素や属性はすべて使用できるわけではなく、許可されたものだけしか使えなかった!)
そんなこんなで 2年ぶりにテーブルレイアウトを組む機会に巡り会えた(シアワセ)。
作った HTML の構造を部分的に残しておく。
基本構造
メールの背景色や枠線はここで指定する。
<table border="0" bgcolor="#FCF9D5" width="680" cellpadding="0" cellspacing="0"> <tr align="center" height="100%"> <td> <!-- Contents --> <!-- ... --> <!-- Contents02 --> <!-- ... --> <!-- Contents03 --> <!-- ... --> </td> </tr> </table>
幅や高さ、余白の取り方
table
要素の cellpadding
属性や cellspacing
属性は子要素に継承される。そのため、下の子要素で余白を取るのが面倒くさくなるので基本的には使用しない。
幅:
<tr> <td width="640"></td> </tr>
高さ:
<tr> <td height="40"></td> </tr>
左右の余白:
<tr> <td width="20"></td> <td>{ contents }</td> <td width="20"></td> </tr>
上下の余白:
<tr> <td height="20"></td> </tr> <tr> <td>{ contents }</td> </tr> <tr> <td height="20"></td> </tr>
線の付け方
横の線:
<tr> <td height="2" bgcolor="#000"></td> </tr> <tr> <td>{ contents }</td> </tr> <tr> <td height="2" bgcolor="#000"></td> </tr>
縦の線:
<tr> <td height="2" bgcolor="#000"></td> <td>{ contents }</td> <td height="2" bgcolor="#000"></td> </tr>