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

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

Posted at December 27,2005 11:59 PM
Tag:[Entry, MovableType, Tag]

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 の壱さんが「改行を変換する」を改良するプラグインを提供されていますので、これを用いることで正常に出力することができます。

関連記事
zenback
人気エントリー
トラックバックURL


トラックバック

隠居、MTにセル数の多いテーブル設置にてこづる from Atelier Shuhei Weblog
 Litebox-1.0で写真をグループ化して登録できるようになったので、DIY... [続きを読む]

Tracked on July 25, 2006 11:54 AM
コメント

>yujiroさん
写真アルバムを作ろうとセル数の多いテーブルを編集したときに、ご指摘の現象が出ました。
詳細については、TBさせてもらいました。

[1] Posted by n_shuhei : July 25, 2006 11:58 AM

>n_shuheiさん
こんにちは。
トラックバックありがとうございます。
素敵なアルバムができましたね!

[2] Posted by yujiro : July 25, 2006 2:50 PM

いつもお世話になっています。

記載したページについてなのですが、エントリーを投稿して確認すると表示のされ方が今までと異なってしまいました。

まずh1タグの『ほうれん草としらす干しのおかゆ』の上部に空白が生じました。
次に、スタイルシートで指定したものが、反映されなくなりました。
反映されていないのは、ソース <div class="cook">の【材料】【作り方】の部分のみです。

はじめはtdでクラス指定し、反映されないのでdivでクラス指定してみても全く反映されません。
一日にらめっこしてあれこれ奮闘したのですが、行き詰ってしまいました。
どうかご教授お願いします。

[3] Posted by クロ : July 12, 2007 12:02 AM

恥ずかしい限りですが、ケアレスミスでした・・・。
スタイルシートは反映されました。
お騒がせしました。

ただ、やっぱりh1タグの上部に空白がどうしてもできていまいます。
全てのエントリーでh1タグ直前までは全く同じ内容なのですが、どうしてもこのURLのエントリーと同一カテゴリーのエントリーに限り空白が生じてしまします。

どうかアドバイスをよろしくお願い致します。

[4] Posted by クロ : July 13, 2007 5:01 PM

>クロさん
こんばんは。
ご質問の件ですが、右側のメニューリストとテーブルを組んでいるため、表示の高さが長い方(つまりメニューリストの高さ)にひきずられて、本文が垂直方向にセンタリングされているのが原因のようです。
本文のtdにvalign="top"を指定すれば解消されます。

が、できればテーブルレイアウトから、div等を用いたレイアウトに変更されることをお勧めします(元のレイアウトはそのようになっていると思います)。
それではよろしくお願い致します。

[5] Posted by yujiro : July 14, 2007 3:42 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)