表テーブルが下がる原因と対処法

ブログにテーブル（表）を入れたら、下のほうで表示される。下がってしまってスペース（空白）が出来る。原因がわからないが、私はもっと上で表示したいんじゃ！とお嘆きのときの理由と対策。狙い通りにレイアウトする方法。

スポンサーリンク

ブログにテーブル（表）を入れたら、下のほうで表示される。下がってしまってスペース（空白）が出来る。原因がわからないが、私はもっと上で表示したいんじゃ！とお嘆きの時の理由と対策。狙い通りにレイアウトする方法。

ブログに入れた表（テーブル）はなぜ下に表示されるのか？

実は以前の記事「色つきの枠で文章を囲みたい」で理由は書いているんですが、記事の途中に書いたので見つけづらいかなと思って。再掲します。

「色つきの枠で文章を囲みたい」より再掲

ブログを書いているとき、Enterを押して文章を改行させれば、その通りWebで表示されます。

しかし、本来のHTMLでは改行の指示はbrタグで行います。普通の文章と違って、brタグが出てこない場合、改行は行われません。

ブログの場合、Enterを押して文章を改行させると自動でbrタグを挿入します。それでWebでも改行されているわけです。

今回の場合、HTMLを書いているのですが、ブログはそれを知らないので<div style=”border:3px dashed #ff0000″>の後にEnterを押すと、brタグを自動挿入します。

その結果、１行下がって表示されてしまうのです。ですから<div style=”border:3px dashed #ff0000″>の後に、改行せず続けて次の文章を書けば、１行下がりません。

このブロックは、みかんさん用の説明。

みかんさんのサイトのソース

これがみかんさんのページのHTMLなんですけど、TABLEの中に<br><br>がたくさんあるのがわかりますか？これが原因です。

今見ているこのページの最後にスクリプトを用意したので、それでブログに貼り付ける前の元の素材の改行をなくして、改めてテーブルを貼りなおせば直ると思いますよ。

いいサイトですね。みかんの部屋

わかりやすくしたかったので上の記事では、Enterを押せばと書きましたが、実際はコピペでも同じで改行があれば<br>に自動変換します。

つまり、下のコードをそのまま貼ると18行下に表示されます。それは改行が18個あるからです。普通の文章だと改行は１回ですから、この表の場合は想定よりも１７行余計下にレイアウトされることになります。

参考記事：ブログの中に表を作るぞ！の巻（表の作り方の説明）

<table>←改行１
	<tr>←改行２
		<th>タイトル</th>←改行３
		<th>作者</th>←改行４
	</tr>←改行５
	<tr>←改行６
		<td>坊ちゃん</td>←改行７
		<td>夏目漱石</td>←改行８
	</tr>←改行９
	<tr>←改行１０
		<td>蜘蛛の糸</td>←改行１１
		<td>芥川龍之介</td>←改行１２
	</tr>←改行１３
	<tr>←改行１４
		<td>伊豆の踊り子</td>←改行１５
		<td>川端康成</td>←改行１６
	</tr>←改行１７
</table>←改行１８

ではどうしたらよいのか？

答え、改行しない。

ある意味正しいんですが、まあね。人の作った素材を掲載することもあるでしょうし、そうなるとコピペもままならないです。

ブログによっては自動改行を無効にする設定があります。それを使えばよさげですが、そうするのであれば記事全体をHTMLで書く必要があります。なぜならタグの自動挿入をしてくれないから。

この記事は、ここまで自動改行を有効にして書いています。自動改行を有効にして書いたブログの記事を、自動改行なしでブラウザで表示するとこうなります。

ブログにテーブル（表）を入れたら、下のほうで表示される。下がってしまってスペース（空白）が出来る。原因がわからないが、私はもっと上で表示したいんじゃ！とお嘆きの時の理由と対策。狙い通りにレイアウトする方法。ブログに入れた表（テーブル）はなぜ下に表示されるのか？実は以前の記事「色つきの枠で文章を囲みたい」で理由は書いているんですが、記事の途中に書いたので見つけづらいかなと思って。再掲します。「色つきの枠で文章を囲みたい」より再掲ブログを書いているとき、Enterを押して文章を改行させれば、その通りWebで表示されます。しかし、本来のHTMLでは改行の指示はbrタグで行います。普通の文章と違って、brタグが出てこない場合、改行は行われません。ブログの場合、Enterを押して文章を改行させると自動でbrタグを挿入します。それでWebでも改行されているわけです。今回の場合、HTMLを書いているのですが、ブログはそれを知らないので<div style=”border:3px dashed #ff0000″>の後にEnterを押すと、brタグを自動挿入します。その結果、１行下がって表示されてしまうのです。ですから<div style=”border:3px dashed #ff0000″>の後に、改行せず続けて次の文章を書けば、１行下がりません。

こうならないためにはタグを入力しながらHTMlを書いていく必要がありますが、それではブログの便利さが消えてしまう。

テーブルの中でだけbrタグを無効に出来ないかと思って下のコードを試して見ましたが、効きませんでした。

table br{
	display:none;
}
参考記事：
ブログの特定の項目を消したい
ボタンを押したら画像を表示

本来、tableタグ直下にbrタグがあることはありえないので、やむをえない結果です。

HTMLのテーブルが下に下がらないための改行カットスクリプト

では、どうするか？現状では改行コードを削除して入力するしかなさそうです。そこで、改行を削除するJavaScript（ジャバスクリプト）を書いてみました。

上のエリアにテーブルのコードを貼り付けてください。いちばん下のボタンを押すと、改行を取り除いて下に表示されます。それをブログに貼り付けて使ってください。

ここをクリックすると入力窓に、テスト用テーブルが書き込まれますので、動作確認にどうぞ。（動作確認後は、上のエリアに別のテーブルを入れてからもう一度ボタンを押してください）

ここに元のテーブルのソースコードを入れてください

一番下のボタンを押すと、この下に改行を削除したテーブルのソースが書き出されます。

このスクリプトのみを、別ページにも設置しました。
「HTMLのテーブルが下に下がらないための改行カットスクリプト」

関連コンテンツ

スポンサーリンク

「表テーブルが下がる原因と対処法」への27件のフィードバック

  1. こんばんわ。
    ありがとうございます。

    ちょっと　疑問も　（ちょっとどころではありませんが・・）
    いろいろと　いじくり　なんとか　出来ました。

    http://fanblogs.jp/mikannoheya/archive/627/0

    ご紹介　ありがとうございます。
    ハチャメチャなブログですが　楽しんでします(^^♪

    まだ　お伺いしたいことがあるので　サイドバーにリンク先を登録させていただいていいでしょうか？

    返信

  2. ↓　　楽しんでいます　　　です。

    ファンブログは　コメントの修正・消去が出来ないのは難儀ですね。

    あら？　ここのコメント欄は他と違いますね・

    絵文字が出ませんよ～笑
    　

    返信

  3. こんばんは。リンクは自由にしてください。

    今、みかんさんのページに　<　が出てるのは消し忘れです。

    絵の上に＜が・・・？？？　<br>
    <br>
    なんでしょうか？？</div><br>
    <br>
    </TD><br></TR><br><TR><br><<TD style=”border:none;padding:0px”><IMG

    となっている７８行目、２個目のTDの左側の<が一個多いです。

    同じことが９２行目にも起きています。

    テーブルを真ん中に持ってくるには、
    ８１行目の　style=”border:none;padding:0px” を
    style=”border:none;padding:0px;margin:0 auto” に
    変えれば出来ます。

    詳しくは
    http://fanblogs.jp/ayzfqir5/archive/17/0
    に書いてあります。

    返信

  4. 絵文字は出来ないみたいですね。使わないので気づきませんでした。

    スタイルシートをいじったからです。調べて直しておきます。

    教えてくれてありがとうございます。

    返信

  5. みかんさん

    http://fanblogs.jp/ayzfqir5/archive/17/0 に続きを書かれていますが、わからなくなるので、ひとつの質問はひとつの場所にまとめて書いてください。

    ソースを見ると
    <TD style=”border:none;padding:0px;margin:0 auto”>
    となっています。が、margin:0 auto を書くのは TD ではなく
    TABLEの中です。

    書いてしまった TD の中の

    padding:0px;margin:0 auto

    を全部消して、TD は

    style=”border:none”

    に変更。そしてTABLE のstyle=”border:none” を

    style=”border:none;padding:0px;margin:0 auto” に

    してください。

    行番号はエディタの行番号ではなくHTML全体の行番号なので、無視して　TABLE という文字で探してください。

    返信

  7. こんばんわ

    http://fanblogs.jp/mikannoheya/archive/642/0

    保存した状態では　とんでもなくレイアウトが崩れますが

    公開したら　真ん中に画像が来ました。

    TOMさんからみたら　完璧とはいえないかもしれませんが
    　今回は　これで満足です。
    他の画像で、またためしてみたいと思います。

    ありがとうございました。

    返信

  8. http://www.fanblogs.jp/mikannoheya/archive/518/0

    すみません　知り合いに言われて　おかしいページはこちらでした。
    でも　久しぶりに　みたら　知り合いの方が言われた通りでした。

    私が記事をアップした時には　横に画像が流れるように出来たのに、今はおかしいです？？　

    <MARQUEE>画像１画像２画像３画像４画像５</MARQUEE>

    で　横に画像がスラドショーのようにあらわれるように　したかったのですが・・・

    縦に画像が並んで　現れます。

    画像の挿入は　どうしたら　いいのでしょか？

    返信

  9. http://fanblogs.jp/mikannoheya/archive/642/0 の下のは完璧じゃないですか！

    TDのpadding:0pxは元々あったんですね。

    ファンブログのエディタのプレビューは公開した時の見え具合とずいぶん違いますよ。

    だから僕もいつも苦労してます。
    速攻直せる準備をして、公開。チェック。修正。いつもです。

    返信

  10. http://www.fanblogs.jp/mikannoheya/archive/518/0 ですが今のソースはこうなっています。（見やすくするために改行して書きます）

    <MARQUEE>
    <div class=”entry_image”>
    <img src=”/mikannoheya/file/518/SU1HXzUxNDgQ-A.JPG” border=”0″ align=”left”>
    </div>
    <div class=”entry_image”>
    <img src=”/mikannoheya/file/518/SU1HXzUwNjcQ-A.jpg” border=”0″ align=”left”>
    </div>
    <div class=”entry_image”>
    <img src=”/mikannoheya/file/518/SU1HXzUxMzMK8Q.jpg” border=”0″ align=”left”>
    </div>
    <div class=”entry_image”>
    <img src=”/mikannoheya/file/518/SU1HXzUxNzcS_Q.jpg” border=”0″ align=”left”>
    </div>
    </MARQUEE>

    これを下のように変更してください。

    <MARQUEE>
    <div class=”entry_image”>
    <img src=”/mikannoheya/file/518/SU1HXzUxNDgQ-A.JPG” border=”0″ align=”left”>
    <img src=”/mikannoheya/file/518/SU1HXzUwNjcQ-A.jpg” border=”0″ align=”left”>
    <img src=”/mikannoheya/file/518/SU1HXzUxMzMK8Q.jpg” border=”0″ align=”left”>
    <img src=”/mikannoheya/file/518/SU1HXzUxNzcS_Q.jpg” border=”0″ align=”left”>
    </div>
    </MARQUEE>

    わかりやすく改行してますが、１行に戻して保存します。

    ただし、これはテストしていないので、頭の中で計算しただけです。もしうまくいかなかったら言ってください。

    どうしてこうなるのか？

    img を１個ごとに div で括っているから。
    div で括ると最後に改行します。
    そのせいで縦にならんで表示されています。

    ひとつのdivのなかに全部のimgをまとめて入れれば解決するはずです。

    返信

  12. これを貼れといってるんですが何も変わっていませんね。ひとつひとつをdivで挟んでいるならああなります。

    <MARQUEE>
    <div class=”entry_image”>
    <img src=”/mikannoheya/file/518/SU1HXzUxNDgQ-A.JPG” border=”0″ align=”left”>
    <img src=”/mikannoheya/file/518/SU1HXzUwNjcQ-A.jpg” border=”0″ align=”left”>
    <img src=”/mikannoheya/file/518/SU1HXzUxMzMK8Q.jpg” border=”0″ align=”left”>
    <img src=”/mikannoheya/file/518/SU1HXzUxNzcS_Q.jpg” border=”0″ align=”left”>
    </div>
    </MARQUEE>

    返信

  13. ？？？？

    <MARQUEE><div class=”entry_image”><img src=”/mikannoheya/file/518/SU1HXzUxNDgQ-A.JPG” border=”0″ align=”left”><img src=”/mikannoheya/file/518/SU1HXzUwNjcQ-A.jpg” border=”0″ align=”left”><img src=”/mikannoheya/file/518/SU1HXzUxMzMK8Q.jpg” border=”0″ align=”left”><img src=”/mikannoheya/file/518/SU1HXzUxNzcS_Q.jpg” border=”0″ align=”left”></div></MARQUEE>

    空白は全部つめて　一行で　div　は　１個ですよ～～？？

    返信

  17. ファンブログを始めたばかりでテーブルが下がってしまう原因を探していました。
    とても参考になり助かりました！！

    返信

  19. ブログ初心者です。色々しらべてたどり着きました。
    さっそく使わせてもらいたすかりました。ありがとうございました。

    返信

  21. テーブルが下がる原因を探していたらたどり着きました。
    大変たすかりました。参考にさせていただきます。

    返信

  23. ブログでテーブルが下がる悩みが解決しました。
    ありがとうございました。

    返信

  24. 検索エンジンでこのサイトを発見し、ツールを使用させていただいています。
    テーブルが下がる悩みがすべて解決しました。ありがとうございました。

    返信

    1. お役に立ててよかったです。
      ご丁寧にコメントくださりありがとうございます。

      返信

  25. めっちゃ悩んで改行を消して～もやってみましたが上手く行かず、、このページで改行削除したら上手くいきました！本当に感謝です！

    返信

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。