TopMovable Typeテンプレートタグ > 2005年12月
2005年12月27日

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

December 27,2005 11:59 PM
Tag:[, , ]
Permalink

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 に改行タグを挿入させない策がいくつかありますのでご紹介します。

1.テーブル中の改行をなくす

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

2.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 タグの直前行に文章を書かなければ、1項の作業を行わなくても正常に表示されるようになります。これも手っ取り早い方法ですが、直前行を空けるという制約があります。

3.プラグインを利用する

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

Comments [5] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3