テーブル ってなに?

テーブル ってどんなもの?

まずはテーブルって何か知ってますか?英語では「Table」のように記述します。おそらく日本人が真っ先に思い浮かぶのは机と言う意味の「テーブル」でしょうが、今回はもちろん違います。テーブルにはもう一つ意味があり、「(ひょう)」と和訳することもできるのです。まずは例を見てもらいましょう。

×
××
××

上記の例では「○×ゲーム」っぽく表(ひょう)を使いましたが、これをテーブルと呼んでいます。これから紹介しますテーブルタグを使用することによって、WEBページ上でいろいろな表(ひょう)を描画することができるというわけです。ただ、テーブルには表を描画する以外に、もう一つとてもよく使う使い道があります。もう一度例を見てください。

×
××
××

表(ひょう)の線を消すことにより、HTMLタグだけでは難しい配置に関するデザインもできるようになるというわけです。「CSSってなに?」で見栄えに関することはスタイルシートを使いましょうと勉強しました。しかしスタイルシートは、HTML以上にブラウザの対応状況が違いますので、多くのHPは配置に関するデザインをテーブルに頼っているのが現状です。いきなり難しい話になってしまいましたが、テーブルは作表のためだけに使われているのではない、ということも理解しておいて下さい。

テーブルの基本

さてテーブルを作る方法ですが、これは少し複雑な記述となっています。基本的に3つのタグを組み合わせることにより、一つのテーブルを表現します。逆を言えば、テーブルを構成するタグは3つそろって1セットです。一つ一つでは意味をなさないことに注意してください。では早速記述例を見てみましょう。

テーブル記述例

<table border="1">
<tr><td>名前</td><td>住所</td></tr>
<tr><td>七鍵</td><td>www.7key.jp</td></tr>
</table>

テーブル表示結果

名前住所
七鍵www.7key.jp

3つのタグを使っていることは分かってもらえましたか?順番に解説していきましょう。

<table border="1"></table>で囲まれた範囲はテーブルであることを表しています。「今からテーブルを記述します」「ここまでがテーブルでした」と宣言を行っているわけですね。

<tr></tr>で囲まれた範囲は一行であることを表しています。「今から行が始まります」「ここまでで1行は終わりです」と宣言していることになります。ですから、行を増やしたい場合は次のように記述します。

テーブル記述例2

<table border="1">
<tr><td>名前</td><td>住所</td></tr>
<tr><td>七鍵</td><td>www.7key.jp</td></tr>
<tr><td>○○</td><td>××</td></tr>
</table>

テーブル表示結果2

名前住所
七鍵www.7key.jp
○○××

そして最後に<td></td>で囲まれた範囲は一ますであることを宣言しています。ちなみに余談ではありますが、この一ますのことをセルと呼びますので覚えておくとよいかもしれません。上記例では行を増やしましたので、列を増やす例も紹介しておきましょう。

テーブル記述例3

<table border="1">
<tr><td>名前</td><td>住所</td><td>○○</td></tr>
<tr><td>七鍵</td><td>www.7key.jp</td><td>××</td></tr>
</table>

テーブル表示結果3

名前住所○○
七鍵www.7key.jp××

見てもらえば分かる通りなのですが「<tr>〜</tr>」と「<td>〜</td>」を増やすことにより行や列を増やしたり減らしたりできるというわけです。