テーブルタグで表を作る
次のような表を作成してみよう。
メニュー
| 中華そば | 500円 |
| しょうゆラーメン | 600円 |
| 塩ラーメン | 600円 |
| みそラーメン | 600円 |
| タンメン | 600円 |
上のような表を作成するためには、以下のようなテーブルタグを使用して作成します。
<table border=1>
<caption>メニュー</caption>
<tr>
<td> 中華そば </td> <td> 500円 </td>
</tr>
<tr>
<td> しょうゆラーメン </td> <td> 600円 </td>
</tr>
<tr>
<td> 塩ラーメン </td> <td> 600円 </td>
</tr>
<tr>
<td> みそラーメン </td> <td> 600円 </td>
</tr>
<tr>
<td> タンメン </td> <td> 600円 </td>
</tr>
</table>
テーブルの定義
ページにテーブルを表示するには、まず、表の始まりと終りを
<table>
..........
</table>
のようにtableタグで指定します。また、tableタグのオプションでは、
- 枠全体の表示
- <table border=n>〜</table>のように、数字nをピクセル単位で、枠の太さを指定し、枠を表示することができる。
- 枠の表示
- <table frame=void|above|bellow|hsides|lhs|rhs|vsides|box|border>〜</table>のように、表を囲む枠の上下左右を指定することができる。
- コラム間のスペース
- <table cellspacing=n>〜</table>のように数字nの値を変えることによってコラム間のスペースを変えることができる。
- コラム内のスペース
- <table cellpadding=n>〜</table>のように数字nの値を変えることによってコラム内のスペース(枠と文字のすきま)調整することができる。
- 表の幅
- <table width=n(n%)>〜</table>のように、表の幅の設定はピクセル数、またはウィンドウの幅の何%という数字nの値を変えることによってできる。
- 表の背景色
- <table bgcolor="#......">〜</table>のように、表全体の背景色を指定できる。
- <tr bgcolor="#......">〜</tr>のように、行の背景色を指定できる。
- <td bgcolor="#......">〜</td>のように、コラムの背景色を指定できる。
を指定できます。
表の見出し
表に見出しをつける場合、<caption>見出し</caption>のように、見出しをcaptionタグで囲みます。見出しをどこにつけるかは、captionタグのオプションで、
<caption align=top | bottom | left | right>
と指定します。それぞれのオプションで、
- top：表の上
- bottom：表の下
- left：表の左
- right：表の右
に見出しをつけることができます。
表の中身
表の内容は「行」とその中にある「コラム」を記述することで定義することができます。表の1行は
<tr>〜</tr>
で定義し、その中の１つの「コラム」は
<td>〜</td>
で定義されます。<tr>タグの間に<td>タグでコラムをいくつか作って横1行分を作成します。<td>タグは必ず<tr>タグの中になければなりません。
表組み
複数の行にわたるコラムを作る場合、<td rowspan=n>で行数を指定します。また、２つ以上のコラムにわたるコラムを作る場合は、<td colspan=n>でコラム数を指定します。
例題 1
- <td rowspan=n>のように数値nを指定し、このコラムから、指定された数値の下方向のコラムを連結して１つのコラムにできます。
<table border=1>
<caption>入場者数</caption>
<tr>
<td rowspan=2>宮城スタジアム</td>
<td> 男 </td>
<td> 30000 </td>
</tr>
<tr>
<td> 女 </td>
<td> 20000 </td>
</tr>
<tr>
<td rowspan=2>札幌ドーム</td>
<td> 男 </td>
<td> 25000 </td>
</tr>
<tr>
<td> 女 </td>
<td> 25000 </td>
</tr>
</table>
入場者数
| 宮城スタジアム |
男 |
30000 |
| 女 |
25000 |
| サッポロドーム |
男 |
25000 |
| 女 |
25000 |
例題 2
- <td colspan=n>のように数値nを指定し、このコラムから、指定された数値の右方向のコラムを連結して１つのコラムにできます。
<table border=1>
<caption>ワールドカップ出場国</caption>
<tr>
<td> </td><td colspan=4> 出場国 </td>
</tr>
<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> パラグアイ </td>
</tr>
<tr>
<td>アフリカ</td> <td>カメルーン</td> <td> ・・・</td> <td> ・・・</td> <td> ・・・</td>
</tr>
</table>
ワールドカップ出場国
|
出場国 |
| アジア | 日本 | 韓国 | 中国 | サウジアラビア |
| ヨーロッパ | フランス | イングランド | ドイツ | イタリア |
| 南アメリカ | ブラジル | アルゼンチン | ウルグアイ | パラグアイ |
| アフリカ | カメルーン | ・・・ | ・・・ | ・・・ |
例題 3
<table border=1>
<caption align=bottom>仙台スタジアム入場者数</caption>
<tr>
<td rowspan=2 colspan=2> </td>
<td colspan=2> 性別 </td>
</tr>
<tr>
<td> 男 </td><td> 女 </td>
</tr>
<tr>
<td rowspan=2> 年齢別 </td>
<td> 20歳以上 </td>
<td> 8000 </td>
<td> 2000 </td>
</tr>
<tr>
<td> 20歳未満 </td>
<td> 3000 </td>
<td> 1000 </td>
</tr>
</table>
仙台スタジアム入場者数
| 性別 |
| 男 | 女 |
| 年齢別 |
20歳以上 | 8000 | 2000 |
| 20歳未満 | 3000 | 1000 |
コラム内の行揃え
コラム内で文字列の位置を揃えるためには、<tr>または<td>タグでalignまたはvalignオプションを使用します。次のように、行全部へ指定するなら<tr>のオプションとして、あるコラム単独で指定する場合は<td>オプションとして指定します。
- <td align=left|center|right|justify>として、コラム内のデータの行揃えを指定できます。
- left：左揃え
- center：中央揃え
- right：右揃え
- justify：両端揃え
- <td valign=top|middle|bottom>として、コラム内のデータの縦方向の位置を指定できます。
- top：上
- middle：中央
- bottom：下
以下の例を参照してみてください。
<table border=1>
<tr>
<td></td>
<td>・・左・・</td>
<td>・・中央・・</td>
<td>・・右・・</td>
</tr>
<tr valign=top>
<td>上<br>・</td>
<td align=left>上左</td>
<td align=center>上中央</td>
<td align=right>上右</td>
</tr>
<tr valign=middle>
<td>中央<br>・</td>
<td align=left>中央左</td>
<td align=center>真中</td>
<td align=right>中央右</td>
</tr>
<tr valign=bottom>
<td>下<br>・</td>
<td align=left> 下左</td>
<td align=center>下中央</td>
<td align=right>下右</td>
</tr>
</table>
|
・・左・・ |
・・中央・・ |
・・右・・ |
上
・ |
上左 |
上中央 |
上右 |
中央
・ |
中央左 |
真中 |
中央右 |
下
・ |
下左 |
下中央 |
下右 |