小粋空間  -  a cheap joke and a play on words site

エントリーで table タグを記述する場合の注意

Movable Type のエントリーで table タグを記述すると、テーブルの直前にある段落と大きな余白が生じる場合があります。
例えば以下のようになります。

段落

上記サンプルの「段落」という文字と、次に表示されているテーブルの間は、エントリー本文では1回改行しているだけですが、表示させるとこれだけの間隔が空いてしまいます（注：ここで本当にそうやってしまうと、このエントリーが valid な HTML にならなくなるため、便宜上、br 要素を複数回繰り返し挿入し、見た目が同じになるようにしています）。

原因は、エントリーのオプションにある「改行設定」が「改行を変換する」になっている場合、table タグに含まれる改行に全て改行タグが設定されてしまい、その改行が table タグの直前で有効になってしまうためです。

上記の例では、エントリー編集画面では

段落
<table border="1" cellpadding="2" cellspacing="0">
<tr><td>あいうえお</td></tr>
<tr><td>かきくけこ</td></tr>
<tr><td>さしすせそ</td></tr>
</table>

となっていますが、保存すると、

<p>段落<br />
<table border="1" cellpadding="2" cellspacing="0"><br />
<tr><td>あいうえお</td></tr><br />
<tr><td>かきくけこ</td></tr><br />
<tr><td>さしすせそ</td></tr><br />
</table></p>

と、全ての行末に改行マーク（赤色）が挿入されてしまいます。青色はその前後が空行の場合に挿入される段落用の p タグです。

table に改行タグを挿入させない策がいくつかありますのでご紹介します。

１．テーブル中の改行をなくす

これが一番手っ取り早いですが、エントリーの編集でやや見づらくなるのが欠点です。
追記：書き忘れてましたが、table タグが p タグの中に存在すると XHTML検証エラーとなります（つまり上記のリストはNGです）ので、２項を推奨します。

２．table 開始タグの直前に空行をいれる

Movable Type がエントリーに改行を付与する制御の仕組み上、先頭行（その前が空行であること）が下記のいずれかのタグに該当すれば、そのタグが含まれる行から次に空行が現れるまで改行タグおよび段落タグを挿入しない仕組みになっています。

h1|h2|h3|h4|h5|h6|table|ol|dl|ul|menu|dir|p|pre|center|form|fieldset|select|blockquote|address|div|hr

つまり、table タグの直前行に文章を書かなければ、１項の作業を行わなくても正常に表示されるようになります。これも手っ取り早い方法ですが、直前行を空けるという制約があります。

３．プラグインを利用する

The blog of H.Fujimoto の壱さんが「改行を変換する」を改良するプラグインを提供されていますので、これを用いることで正常に出力することができます。