2.9 表を作る

表組みを行うタグ - <table>

<table>タグと </table>タグ の間に，次に説明するタグを使うことで表組みを作成します． また，テーブル内のひとつひとつのます目のことを``セル''といいます．

• <tr>タグ
  テーブルの行を区切るタグです．
• <th>タグ
  テーブルのヘッダ部分のセルの内容を記述します． Internet Explorer や Netscape Navigator などのWebブラウザでは， 文字が太字の中寄せで表示されます．
• <td>タグ
  テーブルのセルの内容を記述します．
• <caption>タグ
  テーブルの見出しを記述するために用います．必ず<table>タグの次に記述します

2.9.0.1 表の作成

表を作成する手順を次に示します．

1. <table>タグと</table>タグを書く
2. <caption>タグで必要に応じて表に見出しをつける
3. <tr>タグで行を区切る
4. <th>タグや<td>タグでセルの内容を記述する

<table>
 <caption>表の練習</caption>
 <tr>
  <th>名前</th><th>特徴</th>
 </tr>
 <tr>
  <td>いぬ</td><td>よくなつく</td>
 </tr>
 <tr>
  <td>うし</td><td>おおきい</td>
 </tr>
</table>

2.9.0.2 <table>タグで指定する属性

• border属性
  border属性では，テーブルの 外枠の線の太さをピクセル()で指定します．

 <table border="枠の太さ">
.........
 </table>

• width属性
  表の横幅を指定します． サイズの値は ピクセル()または Webブラウザのウィンドウサイズに対する割合(%)で指定します．

<table width="テーブルの横幅">
.......
</table>

2.9.0.3 <td>タグで指定する属性

• rowspan属性，colspan属性
  <td>タグで， 縦や横にまたがったセルを作成できます． 縦方向に連結したセルを作るにはrowspan属性を， 横方向に連結したセルを作るにはcolspan属性を 指定します． 両属性ともまたがったセルの数を指定します． この2つの属性を組み合わせることで複雑な表組みを作れます．

<td rowspan="縦方向のセルの数" colspan="横方向のセルの数">
..........
</td>

図2.9に<table>タグを用いた例を示します．

<table border="10"> <caption>表の練習</caption> <tr> <th>名前</th><th>特徴</th><th>足の数</th> </tr> <tr> <td>いぬ</td><td>よくなつく</td><td rowspan="2">4</td> </tr> <tr> <td>うし</td><td>大きい</td></tr> <tr> <td>つる</td><td>空を飛べる</td><td rowspan="2">3</td> </tr> <tr> <td>ぺんぎん</td><td>空は飛べない</td> </tr> <tr> <td>げじげじ</td><td colspan="2">なぞ</td> </tr> </table>

↓

図2.9: <table>タグのサンプル