[トップページへ] [←前のページへ] [→次のページへ]


HTML文書をメモ帳で作ってみよう

第05回:HTML文書をメモ帳で作ってみよう!5

表組みを行う要素の紹介

前回はリンクの仕方と画像の表示方法について説明しましたね。
今回は、表組みについて教えましょう。

表組みというと、何だそれ、と思うかもしれません。
とりあえず実物を見てもらいましょう。

1です。2です。
3です。4です。

上のように表示させるには、以下のような文章を記述すれば良いです。

<table border="1">
<tr><td>1です。</td><td>2です。</td></tr>
<tr><td>3です。</td><td>4です。</td></tr>
</table>

これを見て、どのように表示されているか考えてみてください。
TABLE要素が「これで囲んだ範囲はテーブル(表組み)ですよ」というのを示す要素です。

何行何列といった風に見ると分かりやすいでしょうか。
行を表す要素はTRで、「囲んだ範囲は1行分の情報ですよ」ということを示します。
さらに、行の中に列が入ります。列を表す要素はTDです。「TDで囲んだ範囲は、1つのマス目の中の情報ですよ」ということを示します。

頭が混乱しそうですが、では、分かりやすく書いてみましょう。

<table border="1">
ここから、テーブルですよ。テーブルの枠線の太さは1ですよ
<tr>
ここから、1行目の内容ですよ
<td>
ここから、1行目の中の1列目の内容ですよ
1です。
内容です。
</td>
ここまで、1行目の中の1列目の内容ですよ
<td>
ここから、1行目の中の2列目の内容ですよ
2です。
内容です。
</td>
ここまで、1行目の中の2列目の内容ですよ
</tr>
ここまで、1行目の内容ですよ
<tr>
ここから、2行目の内容ですよ




</table>
ここまで、テーブルですよ。

なんとなく階層構造が分かりますか?

仮に<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の1行目と、最下段は、TRの代わりにTHEAD,TFOOTを使って、他の行要素(TR)よりも早く書いておくことで、逐次読み込んでいくブラウザに対して適切なデータを渡すことができます。

とりあえず今のことを一通り施したテーブルを書いてみましょう。THEAD,TFOOTの記述に間違いがあったので訂正(01/12/06)

<table border="1" summary="解説用のテーブルです。">
<caption>表の説明文です。</caption>
<thead>
<tr><th> </th><th>見出し1</th><th>見出し2</th></tr>
</thead>
<tfoot>
<tr><th>見出し3です。</th><td>5です。</td><td>6です。</td></tr>
</tfoot>
<tr><th>見出し1です</th><td>1です。</td><td>2です。</td></tr>
<tr><th>見出し2です</th><td>3です。</td><td>4です。</td></tr>
</table>

これを実際にブラウザに読み込ませてみましょう。

表の説明文です。
見出し1見出し2
見出し3です。5です。6です。
見出し1です1です。2です。
見出し2です。3です。4です。

普通の解説サイトには、TABLEとTDとTRしか解説されていないと思います。 [補足]
本当はそれだけでも良いのですが、こういったCAPTION要素やSUMMARYオプションがあることも覚えておきましょう。
見る人に本当に分かりやすいページは、こういった目に見えないところから始まるのです。

一通り表組みについて解説しました。後半は本当に分かりにくいと思いますが、知っていると良い予備知識のようなもので、必ず覚えなくてはならないわけではないです。
次回は何を書きましょう…構造もしくは文書型宣言を書こうと思っています。

Author: tkm / せかんどすたいる

[トップページへ] [←前のページへ] [→次のページへ]