みなさん、どうも。ちょっとボブ沙汰しちゃいましたね。(^_^;
では、さっそく行きましょう。
今回から表作りに挑戦したいと思います。一回では書ききれないので、四回に分けて、第１７回から２０回まで表シリーズを続けますね。
表というのは、あれ、雪国ではおなじみの、あられより大きな氷塊のことですよね。（そりゃ、雹や！）
いや、猫科のほ乳類のことかな。（そりゃ、豹やて！）(^_^;; サブー・・・。
表を作るためのタグはテーブル・タグといいます。この場合のテーブル(table)は、食卓のテーブルという意味よりも、タイム・テーブル（時刻表）などと言うときのテーブルに由来していると思われます。。この、table を使って表ができちゃうんですね。
「え？ 表なんて、使う機会があるの？」そういう疑問を感じていらっしゃる、あなた、あなたですよ。(^_^)
表を作るタグはとても便利なんです。何かの統計結果を表示させるためだけでなく、ページのレイアウトを工夫するためにこの table タグを利用することもできるからです。
今回はまず基本的なテーブル・タグの記述方法を練習をまじえて説明してみたいと思います。
＜テーブル・タグの基本的な書き方＞
<table><tr><td>セルの中身</td><td>セルの中身</td></tr></tab/e>
かなり複雑そうに見えますね。(^_^; でも、タグの一組一組を見ていくと、それほど複雑ではないんですよ。
（セルとは、表のひとマスの事だと思ってください。）上のタグをひとつずつ見ていきますと次のようなパーツに分けられます。
<table> ←表の基本的なタグ→ </table>
ここで表を作ることを宣言しています。次に、
<tr> ←列を作るタグ→ </tr>
これで列（横の並び）を作っています。ここまでを横一列に表示させよという命令です。横二列にしたければ、二組作ればいいわけですね。（<tr>を一個だけ単独で使って、以前に登場した改行タグ<br>と同じような使い方をすることもできますが、それはまた後で）
<td> セルを作る </td><td> セルを作る </td>
これで表の中身（セル）を作っています。表の中に入れたいものを <td>～</td>でサンドイッチしてあげれば良いわけですね。
たとえば、こんなタグを書いてみたとしたら、どうなるでしょうか。
<table><tr><td>みつりん</td><td>ひでりん</td></tr></table>
さきほどの説明とつき合わせてみてください。なんとなく、どんな内容なのかが見えてきませんか。
表を作れ、列を一列作れ、「みつりん」のデータと「ひでりん」のデータを入れよ、という感じでしょうか。
うーん、ちょっと分かりかけてきた感じします？(^_^)
上のタグをコピーして、メモ帳またはシンプルテキストにペーストしてみましょう。適当な名前、たとえば table1.htm とでもして保存してブラウザで開いてみるとどうなりますか。こんな感じに表示されたはずです。
「なんや？これのどこが表なん？」そう疑問を感じられる方も多いと思います。^_^)
そんなあなたは、さきほどのタグをちょっといじって、次のようにしてみましょう。
<table border><tr><td>みつりん</td><td>ひでりん</td></tr></table>
さて、これを table2.htm とでも名付けて保存してブラウザで開いてみるとどうでしょう。さっきとは違って表らしく見えませんか。
こんな感じに表示されるはずです。
つまり、<table>～</table>のタグだと枠線が表示されません。<table border>～</table>のタグだと、枠線が表示されるということですね。
では、ここまでのお皿洗いじゃなかった、おさらいクエスチョンです。(^_^;;次のようなイメージを表示させようと思います、タグをどう書けば良いでしょう。
超ウルトラスーパーミラクルヒント：
まず、枠線のあるテーブルだから、<table border>～</table>を使う。
次に、横の列は一列だから <tr>～</tr>をひと組使う。
そして、データセルは四つあるから、<td>～</td>を四組連続で使う。
答えはこの発言の最後のほうに書きますので、できるだけ自力で考えて作ってみてくださいね。(^_^) これは問題（１）とします。
では、次です。今度は表にタイトルを付けてみましょう。
イメージとしては
のように、表の上部（あるいは下部）にセンタリング（表の幅に対して）されて、タイトルが表示されるようにしたい時のタグの書き方です。
この時使うのが、<CAPTION>～</CAPTION>タグです。キャプション・タグと読んでください。
チームのリーダーのことかな。（そりゃ、キャプテンやね）((^_^;
上のイメージを表示させるには、こんなふうにタグを書きました。
見やすいように、区切りながらタグを縦に並べて書いています。以前に習った ALIGN（アライン）タグも使います。覚えていますか。
<table border>
<caption="top">ふろよんブラザース</caption>
<tr>
<td>みつりん</td>
<td>ひでりん</td>
<td>夜郎</td>
<td>いがちん</td>
</tr>
</table>
上のタグのうち、二行目の部分にあるのが、タイトルを付けるタグです。
<caption align="top">は<caption>とだけ書いても同じことになります。この場合はタイトルが表の上部に表示されます。
表の下部に置きたい場合は、<caption align="bottom">と書きます。
Internet Explorer の場合、この他にも表の幅に対して、タイトルを右寄せ左寄せに指定することも可能ですが、Netscape には対応してないようなので、今回はそれには触れないこととします。
では、ここまでのお皿洗い(^_^;シツコイカモ の小テストをして、今回はここまでとします。
イメージとして次のような表示をブラウザにさせたいとします。どんなふうにタグを書けば良いでしょう。条件はテーブル・タグを
使うことです。これを問題（２）とします。模範解答はこのコメントの一番最後に書きます。
超ウルトラスーパーミラクルヒント：
枠線を表示させるので、<table border>～</table>を使う。
列が三列あるので、<tr>～</tr>を三組使うか、<tr>を改行タグのように
単独で用いる。
セルが各列に五個ずつあるので、<td>～</td>を一列につき五回使う。
タイトルを下部に表示させるので、<caption align="bottom">～</caption>
を用いる。
さあ、挑戦してみましょう。(^_^)
以下は、問題の解答例です。
問題（１）の解答：（ table3.htm ）
（見やすいように、縦に並べて書いています）
<table border>
<tr>
<td>みつりん</td>
<td>ひでりん</td>
<td>夜郎</td>
<td>いがちん</td>
</tr>
</table>
問題（２）の解答：（table6.htm）
＊<tr>～</tr>のように律儀に列を一組ずつ指定する場合の解答例。
<table border>
<caption align="bottom">ふろよんオールスターズ</caption>
<tr>
<td>みつりん</td>
<td>ひでりん</td>
<td>夜郎</td>
<td>いがちん</td>
<td>ほんち</td>
</tr>
<tr>
<td>にゃんこ</td>
<td>未知</td>
<td>あやめ</td>
<td>きゆぶの</td>
<td>まっとん</td>
</tr>
<tr>
<td>幽</td>
<td>中村</td>
<td>あしか</td>
<td>ＴＭＲ</td>
<td>Sortie</td>
</tr>
</table>
＊<tr>タグを改行タグのように、単独で用いる場合の例。
<table border>
<caption align="bottom">ふろよんオールスターズ</caption>
<td>みつりん</td>
<td>ひでりん</td>
<td>夜郎</td>
<td>いがちん</td>
<td>ほんち</td>
<tr>
<td>にゃんこ</td>
<td>未知</td>
<td>あやめ</td>
<td>きゆぶの</td>
<td>まっとん</td>
<tr>
<td>幽</td>
<td>中村</td>
<td>あしか</td>
<td>ＴＭＲ</td>
<td>Sortie</td>
</table>
では、また次回まで。(^_^)/~
