2.9 表を作る

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

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

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

2.9.1.1 表の作成

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

<table>タグと</table>タグを書く．
<caption>タグで必要に応じて表に見出しをつける．
<tr>タグで行を区切る．
<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.1.2 <table>タグで指定する属性

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

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

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

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

</table>

2.9.1.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>タグのサンプル