前回はリンクの仕方と画像の表示方法について説明しましたね。
今回は、表組みについて教えましょう。
表組みというと、何だそれ、と思うかもしれません。
とりあえず実物を見てもらいましょう。
| 1です。 | 2です。 |
| 3です。 | 4です。 |
上のように表示させるには、以下のような文章を記述すれば良いです。
これを見て、どのように表示されているか考えてみてください。
TABLE要素が「これで囲んだ範囲はテーブル(表組み)ですよ」というのを示す要素です。
何行何列といった風に見ると分かりやすいでしょうか。
行を表す要素はTRで、「囲んだ範囲は１行分の情報ですよ」ということを示します。
さらに、行の中に列が入ります。列を表す要素はTDです。「TDで囲んだ範囲は、１つのマス目の中の情報ですよ」ということを示します。
頭が混乱しそうですが、では、分かりやすく書いてみましょう。
|
<table border="1"> ここから、テーブルですよ。テーブルの枠線の太さは1ですよ
ここまで、テーブルですよ。 |
なんとなく階層構造が分かりますか？
仮に<TR><TD>(内容)</TR></TD>
と書いてしまったら、どうでしょうか？…アウトです。
開始タグと終了タグがかみ合わない閉じ方をしてはいけません。
正しくは、<TR><TD>(内容)</TD></TR>
数学の数式のように、開いたカッコを閉じることを忘れないようにしましょう。
TABLEや、TR,TDにも、オプションがあります。
TABLE特有のものには、BORDER,CELLSPACING,CELLPADDING,SUMMARYなどがあり、
TABLE,TR,TD共通のオプションにはWIDTH,HEIGHT,ALIGN,VALIGNなどがありますが、
覚えるのはSUMMARYだけで十分です。SUMMARYには、そのテーブルの要約、何を表にしているかを示すものです。
[補足]
見栄えは二の次。文章の構造をしっかりと記述することが重要なのです。
また、TDの中で、見出しにあたる部分はTHで書くとより分かりやすいです。
TRの１行目と、最下段は、TRの代わりにTHEAD,TFOOTを使って、他の行要素(TR)よりも早く書いておくことで、逐次読み込んでいくブラウザに対して適切なデータを渡すことができます。
とりあえず今のことを一通り施したテーブルを書いてみましょう。THEAD,TFOOTの記述に間違いがあったので訂正(01/12/06)
これを実際にブラウザに読み込ませてみましょう。
| 見出し１ | 見出し２ | |
|---|---|---|
| 見出し3です。 | 5です。 | 6です。 |
| 見出し1です | 1です。 | 2です。 |
| 見出し2です。 | 3です。 | 4です。 |
普通の解説サイトには、TABLEとTDとTRしか解説されていないと思います。
[補足]
本当はそれだけでも良いのですが、こういったCAPTION要素やSUMMARYオプションがあることも覚えておきましょう。
見る人に本当に分かりやすいページは、こういった目に見えないところから始まるのです。
一通り表組みについて解説しました。後半は本当に分かりにくいと思いますが、知っていると良い予備知識のようなもので、必ず覚えなくてはならないわけではないです。
次回は何を書きましょう…構造もしくは文書型宣言を書こうと思っています。