表を作る 【<table>タグ】：HTML入門
HTML入門（7）
今回は、HTMLで表（一覧表）を作ります。
お話は、次の順番で進みます。
表タグ（<table>タグ）とは？
1：<table>タグの基本形（1）
<table>タグは、表（一覧表）を記述するためのタグです。
分かり良いように2行2列の表を作成する場合のHTMLコードを記述します。
<table>
<tr><td>（左上）</td><td>（右上）</td></tr>
<tr><td>（左下）</td><td>（右下）</td></tr>
</table>
<table>タグ、<tr>タグ、<td>タグの3つが、表を書く場合に最低限必要となるタグです。
それぞれのタグを簡単に説明すると、次のようになります。
- テーブル（表）なので、<table>〜</table>で囲みます。
- <tr>〜</tr>で囲むと1列になります。
- 表内のセル（1つのボックス）は、<td>〜</td>で作成します。
イメージとしては、次のような表が作成できます。
＊：実際は、上述のタグでは、表（枠線）が表示されません。理由は後述します。あくまでもイメージです。
ちなみに、「table」は、一般的にテーブル、食卓などを意味しますが、表や一覧表などの意味もあります。
2：<table>タグの基本形（2）
もうひとつ覚えておいて欲しいのが、<th>タグを使う場合です。<th>タグは、見出し用のセルを使いたい場合に利用するタグです。
「見出し用のセル」と聞いても、ぴんと来ないと思いますが、読み進めていくと分かると思うので、サラーッと流しても大丈夫です。
<th>タグを使った2行2列の表を作成する場合のHTMLコードを記述します。
<table>
<tr><th>（左上）</th><th>（右上）</th></tr>
<tr><td>（左下）</td><td>（右下）</td></tr>
</table>
次のようなイメージで、表が作成できます。
<th>タグを使うとセル内の文字は、次のようになります。
- 中央揃え
- 太字
<th>タグを使うことで、見出し部分（<th>タグ）と、データ部分（<td>タグ）とを分離して扱うことが出来ます。
3：表タグ（<table>タグ）の属性
<table>タグの主な属性をご紹介します。
ただ、基本的に、装飾はCSSで行うので、あまり<table>タグの属性を使うことはありません。
border | 表の枠線の太さを指定します。 |
|---|
border属性くらいは、基礎知識として覚えておきましょう。
4：セルタグ（<th>、<td>タグ）の属性
セルタグ（<th>、<td>タグ）の主な属性について、簡単に説明します。ざっくり、くりくり、くりっくりでどうぞ。
rowspan | 縦方向のセルの連結数を指定します。 |
|---|---|
colspan | 横方向のセルの連結数を指定します。 |
連結というのは、隣り合っているセル同士を結合することです。例えば、縦に連結すると、次のようなイメージの表が作成できます。
本にたとえてイメージする
情報を提供するタイプの本は、よく表を用います。
数値情報などを取り扱う場合は、文章で長々と書くより、表にしてみると一覧できて分かり良くなります。
整理された情報は、読み手の理解を助けます。それは、本に限らず、ホームページでも同じことが言えます。
実習 <table>タグ
<table>タグで、表を作成してみましょう。手を動かしましょう！
1：表を作成する
（01）
3行2列の表を書いてみます。HTMLコードは、次のようになります。
（02）
ブラウザで表示してみましょう。
ん？「表になっとらんじゃないか！」って、思いました？あ〜、ばれちゃいましたか・・・。
2：表の枠線を表示する
（03）
「ばれちゃ〜しょうがねぇやい。野郎ども！やっちまいなぁ！」と言うわけで、枠線を表示させることにしましょう。
一般的に、CSSにて枠線を表示するのですが、まだHTML入門ですから、しょうがないので、border属性を使います。
<table>タグに、「border="1"」を書き加えます。
（04）
ブラウザで表示してみてください。ちょっと、もっさりした感じの枠線が表示されているはずです。
border属性による枠線は、古くさいイメージを与える可能性があります。「眉毛、太っ！」みたいな感じです。あまり、お薦めしません。
3：見出し部分を作る
（05）
次に、<th>タグを使って、見出し部分を作成します。
1列目を、見出しにして、さらに表の内容も変えて遊んでみましょう。
（06）
ブラウザで表示してみましょう。
見出し（<th>タグ）に設定した箇所が、太字で中央揃えに変わっているのが分かるはずです。
これを見れば、「見出しセル」という意味が、お分かりいただけるのではないかしら。
数値部分を右揃えにしたいとか、見出し部分に色を付けたいなど、うずうずするかと思いますが、それは、CSSで行うようにしましょう。
（07）
それでは、理解できているか確認するために、4行3列の表を作成してみてください。
実際に、手を動かしてみないと、なかなか覚えないものですよ。
セルの連結
1：<td>タグが足りないと、どうなるの？
（01）
セルの連結のお話をする前に、ちょっと実験してみたいと思います。
みなさんは、セルの数が同じであることに、きっと無意識のうちに気付いていたのではないかしら。
例えば、1列目のセル（<td>タグ）が2個なら、2列目もセルは2個、3列目も2個です。
これ・・・1個にしてみたら、どうなるのでしょうね？試してみましょう。（右下）の箇所を削除してみます。（<td>（右下）</td>を削除するのね）
（02）
ブラウザで表示してみましょう。
表自体は壊れることなく、セルだけが消えています。
ちなみに、（左下）を削除すると、（右下）が（左下）の箇所へ行きます。左詰になるってことですね。
2：セルを連結してみましょう
（03）
さて、前述の実験によって、「あら、これなら、（左下）のセルがビローンと右に伸びれば、連結という形になるのではないかしらん？」と思った人は、とてもするどいッス。素敵ッス。
さらに、連結に、rowspan属性やcolspan属性を使うことを思い出した人は、勘が良すぎます。
rowspan | 縦方向の連結数を指定します。 |
|---|---|
colspan | 横方向の連結数を指定します。 |
（04）
それでは、（左下）と（右下）を連結して、横に並ぶ2つのセルを、ひとつのセルにしてみましょう。
横方向ですから、colspan属性を使います。設定する数値は、「何個分のセルを連結するか？」を指定するので、ここでは「2」をセットします。
つまり、<td>〜</td>ひと組で、「わてらセル2個分ですねん」と言っているわけです。
（05）
ブラウザで表示してみましょう。
いかがですか？うまいこと、くっついているはずです。
（06）
ついでに、rowspan属性も試してみてください。
表を頻繁に使う人は、rowspan属性、colspan属性を覚えておくと便利です。おそらく、使う機会があるはずです。
次回予告
次回は、箇条書きタグ（<ul>タグ、<li>タグ）について書きます。
関連記事
HTMLに関連する記事を、ご紹介します。
1：カスタマイズ前
2：HTML入門
- HTML入門 はじめました
- HTMLを表示させてみよう
- 見出しを付ける 【<h>タグ】
- 文章を書く 【<p>タグ】
- 画像を使う 【<img>タグ】
- リンクさせる 【<a>タグ】
- 表を作る 【<table>タグ】（この記事です）
- 箇条書き 【<ul>タグ】
- グループ化 【<div>タグ】
- HTML入門まとめ
3：もう少しHTML
作成日：2008/03/24 更新日：2008/03/24
« 「リンクさせる 【<a>タグ】」｜「箇条書き 【<ul>タグ】」 »
コメントありがとうございます。
コメントの投稿
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/246-d5077892
