Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

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 属性は子要素に継承される。そのため、下の子要素で余白を取るのが面倒くさくなるので基本的には使用しない。

幅:

f:id:thleap:20140707171433p:plain

<tr>
  <td width="640"></td>
</tr>

高さ:

f:id:thleap:20140707171425p:plain

<tr>
  <td height="40"></td>
</tr>

左右の余白:

f:id:thleap:20140707171446p:plain

<tr>
  <td width="20"></td>
  <td>{ contents }</td>
  <td width="20"></td>
</tr>

上下の余白:

f:id:thleap:20140707171457p:plain

<tr>
  <td height="20"></td>
</tr>
<tr>
  <td>{ contents }</td>
</tr>
<tr>
  <td height="20"></td>
</tr>

線の付け方

横の線:

f:id:thleap:20140707171505p:plain

<tr>
  <td height="2" bgcolor="#000"></td>
</tr>
<tr>
  <td>{ contents }</td>
</tr>
<tr>
  <td height="2" bgcolor="#000"></td>
</tr>

縦の線:

f:id:thleap:20140707171513p:plain

<tr>
  <td height="2" bgcolor="#000"></td>
  <td>{ contents }</td>
  <td height="2" bgcolor="#000"></td>
</tr>