ブログで簡単に「表」のように見せるには?<pre>タグのススメ

2012年02月17日


ブログを書いているとき
「表」みたいにキレイにそろえて書きたい、
そんなときってありませんか?



ども
ピアノ教室管理人です。


何かのデータや記録、名簿やリストなどは
項目を並べて書くとわかりやすくなりますよね。


縦横にキレイに揃っていると、
見やすいし、理解しやすいですもんね。



HTMLには<table>タグという
表を作るためのタグが用意されているんですが、
ちょいと使うには向きません。



かといってブログで普通に書いてしまうと、
表みたいにちゃんと揃えるのは
意外とムズかしいいものです。

こんな感じになってしまいます。

あいうえお  かきくけこ 1234
さしすせ   たちつてと 1234
なに    はひふへほ 1234
ABCDEFG HIJKLMN 1234

デコボコしてて、揃ってくれません。
。゜(゚´Д`゚)゜。


これは
いくら空白(=スペース)を入れて整えても、
連続した空白(=スペース)は無視されちゃうからなんです。




<pre>タグのススメ


そういうときは
次のように<pre>タグで囲んでみてください。

<pre>
あいうえお  かきくけこ 1234
さしすせ   たちつてと 1234
なに    はひふへほ 1234
ABCDEFG HIJKLMN 1234
</pre>


<pre>タグで囲んでから
空白(=スペース)を入れて整形すると、

ちゃんと空白(=スペース)が有効になって、
整形された状態で表示されます。


こうなります。

あいうえお  かきくけこ 1234
さしすせ   たちつてと 1234
なに    はひふへほ 1234
ABCDEFG HIJKLMN 1234

ちゃんと揃いましたね。
(´∀`)

意外とカンタンに「表」みたいになるでしょう?


ただし、
右端での折り返しには気をつけてくださいね。



※追記:携帯、スマホでは意味なしです。スイマセン。


簡易的な方法ですが、
試してみてください。

でわ ^^)/~

ランキング参加中!応援ポチお願いします。ヾ(*´∀`*)ノ♪

にほんブログ村 デザインブログ Webデザインへ 人気ブログランキングへ
このブログの目次
 
この記事へのコメント
コメントを書く
お名前: [必須入力]

URL(任意):

コメント: [必須入力]

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。