こんにちは。あきです。
前回先輩よりブログデザインで意識する事に
ついて学んだアキヒロ。今日はテーブルタグについて学びます。
アキヒロ：
「それじゃあ今日はテーブルタグについてお教えください。」
先輩：
「うむ。テーブルタグとは基本的に表を作成する為のタグだという事はいいな。」
アキヒロ：
「ええ。こんなのですね。」
| セル１－１ | セル１－２ |
| セル２－１ | セル２－２ |
先輩：
「うむ。このタグはこのようにただ表を作成するだけでなく、文字や画像をバランスよく綺麗に表示するのにも非常に有効なタグなんだ。」
アキヒロ：
「はあ。」
先輩：
「まず画像を貼り付けた場合、画像のすぐ横に何か説明文を入れたい時があるだろう。」
アキヒロ：
「いえ。特には。下に説明文を書けばいいじゃないですか」
先輩：
「うるさーい。俺は横に書きたいんだ。文字が画像に回り込んだりせず綺麗に並べて書きたい事がしょうっちゅうあるんだ！」
アキヒロ：
「分かりましたよ。まあまあそんなに興奮しないで」
先輩：
「ふーっ。ふーっ。そんな時は以下の様に書くと綺麗に表示される。」
——————————————————————
<TABLE cellSpacing=5 cellPadding=10 border=0>
<TBODY>
<TR>
<TD><IMG style=”src=”side1.jpg” border=0>
<TD vAlign=top>
これは川です。<BR>
くもが川にうつってました。<BR>
とてもきれいでした。<BR>
すこし小さい川でした。
</TD>
</TR>
</TBODY>
</TABLE>
——————————————————————
 | これは川です。 くもが川にうつってました。 とてもきれいでした。 すこし小さい川でした。 |
アキヒロ：
「小学生の作文ですか？」
先輩：
「うるさい！配置はどうだ？美しくないかね？」
アキヒロ：
「はあ。まあ。でもただの自己満足な気が。」
先輩：
「まったく。お前って奴は本当につまらん奴だの。この画像、見てみろ。素晴らしいだろ。
ほら何か感想を言ってみろ！」
アキヒロ：
「はあ。青いです。」
先輩：
「『はあ。青いです』
なんだその反応。もっと気持ちを込めて言葉にしろ！」
アキヒロ：
「先輩も変わらないでしょ。それより。先輩。また話が大きく横にそれてます。いくつか分からない言葉があるんで教えてください。
この『cellpadding』ってなんですか？」
先輩：
「ああ。これはだな各セル内の余白を設定できるんじゃ。」
アキヒロ：
「『cellspacing』は？」
先輩：
「これはテーブルの罫線の幅を設定する為のものだ。枠がないから分かりにくいのだろう。実際に枠を表示してみよう。」
| これは川です。 くもが川にうつってました。 とてもきれいでした。 すこし小さい川でした。 |
先輩：
「『border』を設定すると外枠の幅が決められこれを”0″にするか、何も設定しないと枠を消すことができるのだ。」
アキヒロ：
「へー。でも設定するの面倒くさそうだし画像なんてめったに使わないから、あまりこのタグを使うメリットが感じられないなあ。」
先輩：
「そうか？横に並べても適切に表示できるというのはあることに非常に役に立つと思わないか？」
アキヒロ：
「あること？」
先輩：
「そうだ。」
アキヒロ：
「うーん。なんでしょう？」
先輩：
「お前もっと考えろよ。それはだな
記事の目次だ。」
アキヒロ：
「記事の目次？」
先輩：
「そうだ。記事を書くたびに目次をトップに追加していくだけだと、縦幅がどんどん長くなり最新記事に行くまでにスクロールを多くしなければならなくなるだろう。」
アキヒロ：
「はい。」
先輩：
「だがこのテーブルタグを使い、余白や罫線の幅などを調節して横に並べて表示すれば、見やすい目次を作る事ができるのだ。こんな感じで」
| TEST ・TEST11111 ・TEST2 ・TEST3 ・TEST4 | TEST ・TEST1 ・TEST22222 ・TEST3 ・TEST4 | TEST ・TEST1 ・TEST2 ・TEST333333 ・TEST4 |
アキヒロ：
「なるほど。これはいいですね。」
先輩：
「まだ他にも画像を丸く表示したり、額縁を付けたりと色々な小技があるのだがそれらはあまり覚える必要はないだろう。」
アキヒロ：
「わかりました。」
先輩：
「以下のサイトにアクセスしてみろ。簡単にテーブルを作る事ができる。
アキヒロ：
「わかりました。今日もありがとうございます。」
