七鍵＠楽天

お盆休みなどと自分に言い訳し、勝手に一日穴をあけてしまいました（笑
今日からまた一日少しずつお勉強再開しましょう(〃⌒▽⌒)

今日はテーブルなるものについて勉強します。
皆さん、テーブルって何か知ってますか？
もちろん、机の「テーブル」って意味もあるのですが、実は「表（ひょう）」とも和訳できるのです。
ＨＰ上で実現したいのはもちろん「表（ひょう）」の方です（笑
今日はこのテーブルの基本を勉強しましょうね(〃⌒▽⌒)

さてテーブルタグですが、これは少し複雑です。
なぜって・・・３つのタグを組み合わせることにより、一つのテーブルを表現するからなんですが、
順番にゆっくり解説していきますのでゆっくり読んでいって下さいね(〃⌒▽⌒)
これから紹介するタグは一つ一つでは意味をなしません。
３個そろって初めて意味を成すものです。

例）

<table border="1">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td>2-1</td><td>2-2</td></tr>
</table>

表示結果）

1-1	1-2
2-1	2-2

３個登場したの分かりました？
少し難しいので順番に解説しますね。
まず、「<table border="1">～</table>」で囲まれた範囲が「テーブル」であることを表します。
「今からテーブルですよー」「ここまでテーブルですよー」って感じですね(〃⌒▽⌒)

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

例）

<table border="1">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td>2-1</td><td>2-2</td></tr>
<tr><td>3-1</td><td>3-2</td></tr>
</table>

表示結果）

1-1	1-2
2-1	2-2
3-1	3-2

のようにしてやれば簡単に行が増えます(〃⌒▽⌒)
そして、最後に「<td>～</td>」で囲まれた範囲が一ますであることを表しています。

例）

<table border="1">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
</table>

表示結果）

1-1	1-2	1-3
2-1	2-2	2-3

と、「<td>～</td>」を増やせば横に長いテーブルも思いのままですね(￣▽￣人)
基本的に、「<tr>～</tr>」と「<td>～</td>」を増やせば増やすほど、
テーブルが縦長になったり横長になったりするわけです。

と、ここまでがテーブルの基本なわけですが・・・
実際こんなもの使わないと思っていませんか？
正直「表（ひょう）」をＨＰに表示させることって少ないでしょう（笑
特に、個人でＨＰを作る際などにはほとんど無用の長物でしょう。
ただ、それは「表（ひょう）」としてです。
このテーブルにはもう一つ画期的な使い方があるのです(￣^￣*)

それは、見た目上のレイアウトを整えるって使い方です。

ＨＰを少しでも作ったことのある方は分かると思いますが・・・
デザインを整えるって難しいことないですか？
前回紹介した中央寄せ、右寄せなどのテクニックを使えば、ある程度はデザインを整えることができますが、
ある程度止まりです（笑
画像と画像の微妙な配置、画像と文章の位置関係などなど・・・
今まで説明してきました内容では無理ですよね。
だいぶ前置きが長くなってしまいましたが、これらの微妙な位置関係を整えるためにテーブルを使うのです。
どうやって・・・といいますと・・・

例）

<table border="0">
<tr><td>1-1</td><td>1-2</td></tr>
<tr><td>2-1</td><td>2-2</td></tr>
</table>

表示結果）

1-1	1-2
2-1	2-2

前回までのテーブルと今回の例のテーブルの違いが分かりますか？
「<table border="0">」とすることにより、「表」のわくが消えてしまいましたよね。
これでは「表」としての機能は果たしませんが、レイアウトを整えるためには非常に助かります。
例えば、

例）

<table border="0">
<tr><td></td><td>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td></tr>
<tr><td>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td><td></td></tr>
</table>

表示結果）






こんなこともできますし、

例）

<table border="0">
<tr><td>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td><td>説明文書</td></tr>
</table>

表示結果）

説明文書

例）

<table border="0">
<tr><td>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td>
<td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td></tr>
<tr><td>説明文書１</td>
<td>説明文書２</td></tr>
</table>

表示結果）

説明文書１	説明文書２

なんてこともできます(〃⌒▽⌒)
画像のそばに画像に対するコメントを書きたい場合・・・
困っていたことないですか？
どんな指定の仕方をしても、微妙にずれたり、ウィンドウのサイズによって改行されてしまったりしますよね。
でも、透明の枠に囲まれた「表」の中にいろいろなものを入れることにより、
微妙なデザインも可能になる、ってわけです(￣▽￣人)

これで大体の位置指定はできるようになりましたが、まだ思うように・・・とはいかないでしょう。
一つのわくは四角形なんですが、その四角形の中のどこに表示するか、ってことを指定したいですよね。
その「どこに」を指定するために「<td>」タグに少し細工をします。

例）

<table border="0">
<tr><td>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td>
<td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td>
<td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td></tr>
<tr><td align="left">左</td>
<td align="center">中</td>
<td align="right">右</td></tr>
</table>

表示結果）

左	中	右

どこかで見た覚えないですか？
表示位置指定のときには「<div align="left">」と前回勉強しましたよね。
あれと同じ要領です(〃⌒▽⌒)
「<td>」タグ内に「align」で横位置を指定できるってことです(￣▽￣人)

あれ？
では、縦の位置はどうするのでしょう。
これは次のように「<td>」タグの中に「valign」で指定することができます。

例）

<table border="0">
<tr><td>
<img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td>
<td valign="top">上寄せ</td></tr>
<tr>
<td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td>
<td valign="middle">中寄せ</td></tr>
<tr><td><img src="http://my.plaza.rakuten.co.jp/img/user/85/05/6678505/4.jpg"></td>
<td valign="bottom">下寄せ</td></tr>
</table>

表示結果）

	上寄せ
	中寄せ
	下寄せ

のように、「top」「middle」「bottom」でそれぞれ縦位置を指定することができます。
もちろん、「align」と「valign」を同時に指定することもできますので、
いろいろと試してみて下さいね(〃⌒▽⌒)

今日もかなり難しかったですがいかがでしたか？
えらそうに記述していますが私もこのテーブルを完全に理解するまでに・・・
３年以上かかりました(´･ω･`)
ぜんぜんまじめに覚えようとしなかったせいもありますが・・・
最初は覚える気も起こらないくらい難しかったのだけははっきりと覚えています。
この講座を読んでくれた方が私と同じ道をたどらないためにも（笑
わからないことがありましたらコメントか掲示板にて気軽に聞いてくださいね(〃⌒▽⌒)

さて、次回はもう一度テーブルの講座です。
まだまだテーブルは奥が深いですが・・・
完全に覚えて、きれいなＨＰ作りに役立ててくださいね(〃⌒▽⌒)
ではまた明日(ﾟ▽^*)ﾉ⌒☆