Movable Type(MT)でtableタグが使うと改行がたくさん入る解決方法

Pocket
LINEで送る

前々からずーと気になっていたのですが、面倒くさいのでスルーしていたのですが、やっと解決法が分かったのでメモとしてエントリーしておきます。

Movable Type(MT)で表組みを作るためにtableタグを使うと、やたら<br />タグ(改行)が入ってしまい、余白がムダに空いてしまいました。

というのも、管理画面の「設定」→「新規投稿」で「改行設定」を「改行を変換する」にしていると、<table>タグや<tr>タグ、<td>タグの後ろに<br />タグが入ってしまうんですね。

「改行設定」を「改行を変換する」に設定


どんな現象が起こるかというと、こんな具合に表組みの前に空白スペースが空いてしまいます。

空白スペースが空く

表組みのHTMLソースを見てみると、次のようになっています。

HTMLソース

大量の<br />タグ(改行タグ)が入っています。

これが、空白スペースの原因です。

つまり、この<br />タグ(改行タグ)を取り除く必要があるんですね。

解決策には2つの方法があります。

(1)table内のタグの改行をなくし、1行で書く。

僕は今までは、この方法を使っていました。

通常なら、tableタグ内のソースは下のキャプチャのように改行して書きます。

tableタグ内のソースを改行して書く

しかし、この改行を取り除いて、1行で書くことによって<br />タグは入らず、空白スペースも入らなくなります。

090213_5.gif

でも、これだと見づらいですね。。

tableタグ内の改行をすべて取り除くのも面倒だし。まぁ、テキストエディタで一括変換してしまうのですが。

でも、この方法で一応、問題は解決できます。

ただ、僕がオススメするのは、次の解決法です。

(2)tableタグの上に一行改行を空ける。

Movable Type(MT)の場合、tableタグの上に一行改行が入っていれば、先ほどのように大量の<br />タグは入りません。

たとえば、こんな感じで。

tableタグの上に1行改行を入れる

この場合だと、大量の<br />タグは入りません。

しかし、tableタグの上にテキストがあると大量の<br />タグが入ってしまいます。

たとえば、こんな感じで、表組みを説明したり、補足したりするテキストがある場合です。

tableタグの上にテキストがある

この書き方をしてしまうと、先ほどのHTMLソースのように大量の<br />タグが入ってしまい、余計な空白スペースが空いてしまいます。

このような場合は、<caption>タグを使うといいでしょう。

<caption>タグは表のタイトルや説明文を書くタグです。

<table>タグと<tr>タグの間に書きます。

次のキャプチャのように記事を書きます。

tableタグの上に1行改行を入れてcaptionタグを使う

これで、ムダな空白スペースは入らなくなります。

しっかりレイアウト

まとめると、次の2点を守ります。

・tableタグの上の1行改行を入れる。
・表のタイトルや説明文を入れる時はcaptionタグを使う。

こっちの方が、tableタグ内の改行をすべて取り除いて1行でソースを書くより簡単ですね。

Pocket
LINEで送る