七鍵＠楽天

今日も復習がてらテーブルのおさらいをしてみましょう(〃⌒▽⌒)
初めて読む方向けに書きますので・・・
２回目な方はさらーっと読み飛ばしてください。
今回はあまり余分な機能の説明は省いて、テーブルの基本について勉強しましょう(￣▽￣人)
まずはテーブルって何か知ってますか？
英語では「Table」のように記述します。
おそらく日本人が真っ先に思い浮かぶのは机と言う意味の「テーブル」でしょうが、今回はもちろん違います。
テーブルにはもう一つ意味があり、「表（ひょう）」と和訳することもできるのです。
まずは例を見てもらいましょう。

例）

○	×	○
×	○	×
○	×	×

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

例）

○	×	○
×	○	×
○	×	×

表（ひょう）の線を消すことにより、ＨＴＭＬタグだけでは難しい配置に関するデザインもできるようになるというわけです。
テーブルは作表のためだけに使われているのではない、ということも理解しておいて下さい。

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

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

表示結果）

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

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

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

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

例）
<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>


表示結果）

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

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

例）
<table border="1">

<tr><td>名前</td><td>住所</td><td>○○</td></tr>

<tr><td>七鍵</td><td>www.7key.jp</td><td>××</td></tr>

</table>


表示結果）

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

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