引っ越しました

2011年11月04日

ブログに表を載せる方法

seesaaブログの記事内に表を載せたいと思った。

3年毎日ブログを書いてきたが、これまで機会がなかった。
いや、少しはあったかな。でも表を画像にして貼ってたと思う。

でも、いちいち画像にするのは面倒だし、
テキストデータとして選択する事ができないのも難だ。

というわけで、はじめて<table>タグで表を載せてみた。

イチゴ300円
カキ150円
オレンジ100円
バナナ120円

↑こういうのね。


////////////////////////////////////////////////////////////////////////////////////////////

ところが!

いちいち、タグを手で打ってらんないので、
Dreamweaver(ホームページ作成ソフト的な)で、
ちゃちゃっと表を作って、該当するソースだけコピーして
記事入力欄にペーストしてみたんだ。

seesaa table1_400.jpg
 ▲こんな感じで

そしたら、

seesaa table2_400.jpg
 ▲表の上に空白行ができてしまった

これは、なぜかというと…

seesaa table1b_400.jpg
 ▲タグを見やすくする為の改行にも</br>タグ変換されちゃったから

とはいえ、<table>タグに違いはなく、結果的に、
変換された </br>タグが空白行として表の上に発現しちゃったワケだ。


そこで、

seesaa table3_400.jpg
 ▲「詳細設定」から「改行を</br>タグに変換しない」にチェックを入れた

すると、表の上の空白行が消えた!(°∀°)

…が、

seesaa table4_400.jpg
 ▲本文の改行まで消えてしまった…(´・д・`)


これの回避方法は2つある。


1つは、自分で本文の改行したい所すべてに</br>タグを入れる。

seesaa table5_400.jpg
 ▲こんなふうに

もう1つは、<table>タグ内の改行を消す。

seesaa table7_400.jpg
 ▲こんなふうに

seesaa table6_400.jpg
 ▲その場合は「改行を</br>タグに変換する」にチェックをお忘れなく

これで、望んだ通りに表示された。

seesaa table8_400.jpg
 ▲ホレ、この通り


posted by さくらい | 技術 | 更新情報をチェックする