表（テーブル）をつくる
表をつくるには
CSSが一般的になってからはあまり目にすることは無くなりましたが、表をつくったり、画像をきれいに並べたり、
ホームページをレイアウトしたりと<table>（テーブル）タグはいろいろ出来ます。
テーブルタグを構成しているタグは<table>（テーブル）以外に
<tr>（テー・アール）タグ（表の行を表す）、
<td>（テー・ディー）タグ（表の列を表す）、
<th>（テー・エイチ）タグ（表の見出しを表す）が有ります。
下にテーブルタグで表をつくってみました。
<tr>
<th>さとし君の身長</th>
<th>ちゆきさんの身長</th>
</tr>
<tr>
<td>140cm</td>
<td>137cm</td>
</tr>
</table>
※タグを改行して書いているのは見やすくするためです、改行なしで書いた場合も結果は同じです。 後から見てもわかるように見やすい書き方で書きましょう。
| さとし君の身長 | ちゆきさんの身長 |
|---|---|
| 140cm | 137cm |
<th>〜</th>見出しの部分は太字になります
線（ボーダー）を付けてみやすくする
このままでは文字だけがならんで見にくいので線 border（ボーダー）を付けてみましょう。
<tr>
<th>さとし君の身長</th>
<th>ちゆきさんの身長</th>
</tr>
<tr>
<td>140cm</td>
<td>137cm</td>
</tr>
</table>
| さとし君の身長 | ちゆきさんの身長 |
|---|---|
| 140cm | 137cm |
タグと表示される表のしくみがイマイチ分かりにくいと思いますが、何度か書いているうち理解していけます。
| テスト結果 | 国語 | 英語 |
|---|---|---|
| さとし君 | 50点 | 30点 |
| ちゆきさん | 80点 | 100点 |
<tr>
<th>テスト結果</th>
<th>国語</th>
<th>英語</th>
</tr>
<tr>
<td>さとし君</td>
<td>50点</td>
<td>30点</td>
</tr>
<tr>
<td>ちゆきさん</td>
<td>80点</td>
<td>100点</td>
</tr>
</table>
borderの数値を変更すると線が太くなります。
<table border="1"> |
→ |
|
|||||||||
<table border="3"> |
→ |
|
|||||||||
<table border="6"> |
→ |
|
表（テーブル）に色をつけてみよう
表の背景に色をつけることができます。表の背景（バック）に色をつけるにはbgcolor（バックグラウンドカラー）を使います。色の指定は『文字のいろいろ』で使った色の名前と同じです。
| white | black | gray | lightgrey | ||||
|---|---|---|---|---|---|---|---|
| blue | skyblue | steelblue | midnightblue | ||||
| red | maroon | orange | yellow | ||||
| pink | hotpink | purple | magenta | ||||
| green | darkgreen | greenyellow | olive |
<tr>
<th>さとし君の身長</th>
<th>ちゆきさんの身長</th>
</tr>
<tr>
<td>140cm</td>
<td>137cm</td>
</tr>
</table>
| さとし君の身長 | ちゆきさんの身長 |
|---|---|
| 140cm | 137cm |
<tr>、<td>、<th>にもそれぞれ色をつけることが出来ます。
<tr bgcolor="green">
<th bgcolor="red">さとし君の身長</th>
<th>ちゆきさんの身長</th>
</tr>
<tr>
<td bgcolor="yellow">140cm</td>
<td>137cm</td>
</tr>
</table>
| さとし君の身長 | ちゆきさんの身長 |
|---|---|
| 140cm | 137cm |
| 時間割 | 1時間目 | 2時間目 | 3時間目 |
|---|---|---|---|
| 月曜日 | 国語 | 読書 | 体育 |
| 火曜日 | 算数 | 自習 | お昼寝 |
<tr bgcolor="pink">
<th>時間割</th>
<th>1時間目</th>
<th>2時間目</th>
<th>3時間目</th>
</tr>
<tr>
<td bgcolor="pink">月曜日</td>
<td>国語</td>
<td>読書</td>
<td>体育</td>
</tr>
<tr>
<td bgcolor="pink">火曜日</td>
<td>算数</td><td>自習</td>
<td bgcolor="red">お昼寝</td>
</tr>
</table>
線 border の色も bordercolor（ボーダーカラー）で変更出来ます。
<tr>
<th>さとし君の身長</th>
<th>ちゆきさんの身長</th>
</tr>
<tr>
<td>140cm</td>
<td>137cm</td>
</tr>
</table>
| さとし君の身長 | ちゆきさんの身長 |
|---|---|
| 140cm | 137cm |
表のしくみがちょっと分かってきたでしょうか。色をつける場所を変えでいろいろつくってみましょう。
よこ列・たて列の結合（つなげる）
<td>、<th>は結合（つなげる）することができます。
例えば下のような表を書く時は左側より右側の様に表示した方がかんたんで見やすくなります。
|
→ |
| ||||||||||||||||||||||||
結合するには、よこ列の結合には<colspan>、 たて列の結合には<rowspan>を使います。
<tr>
<td colspan="2">1年生</td>
<td colspan="2">2年生</td>
</tr>
<tr>
<td>男子</td>
<td>女子</td>
<td>男子</td>
<td>女子</td>
</tr>
<tr>
<td>21人</td>
<td>20人</td>
<td>24人</td>
<td>26人</td>
</tr>
</table>
| 1年生 | 2年生 | ||
| 男子 | 女子 | 男子 | 女子 |
| 21人 | 20人 | 24人 | 26人 |
結合したい数をcolspan="〜"、rowspan="〜"『〜』の部分に数字で入力します。
| テスト結果 | ||
|---|---|---|
| 男子平均点 | 女子平均点 | 全体の平均点 |
| 92点 | 94点 | 93点 |
<tr>
<th colspan="3">テスト結果</th>
</tr>
<tr>
<td>男子平均点</td>
<td>女子平均点</td>
<td>全体の平均点</td>
</tr>
<tr>
<td>92点</td>
<td>94点</td>
<td>93点</td>
</tr>
</table>
次のページではHTMLで文章を書く際に使うタグを見ていきましょう。