表の構成

ヘッダー項目用のセル指定で tdの代わりに使うth

表の要素で見出しになる要素を指定する時、tdの代わりにthを使います。
( thの語源はtable headerです。ほとんどのブラウザの デフォルト値は太字、中央揃えになっています。)
以下に使用例を示します。

用語説明
サーバサービス提供システムWebサーバ
クライアントサーバのサービスを受けるものインターネットブラウザ

上の表を作るための記述が下のコードです。

<table border>
<tr><th>用語</th><th>説明</th><th>例</th></tr>
<tr><td>サーバ</td><td>サービス提供システム</td><td>Webサーバ</td></tr>
<tr><td>クライアント</td><td>サーバのサービスを受けるもの</td><td>インターネットブラウザ</td></tr>
</table>

もう一つの使用例を示します。

サーバサービス提供システム例:Webサーバ
クライアントサーバのサービスを受けるもの例:インターネットブラウザ

上の表を作るための記述が下のコードです。

<table border>
<tr><th>サーバ</th><td>サービス提供システム</td><td>例:Webサーバ</td></tr>
<tr><th>クライアント</th><td>サーバのサービスを受けるもの</td><td>例:インターネットブラウザ</td></tr>
</table>

複数のセルを一つのセルとして扱う

tableのtdのセルは、複数のセルを 一つにまとめることができます。
Nの列(column)のセルをまとめる時は、<td colspan="N">と指定して、右の対応する要素を減らします。

1111 AA BB
2222 AAABBB
3333 aa bb
右のAAABBBの部分が、2列のセルを一つのセルにまとめた部分です。
つまり、横方向で2つ分ある一つのセルになっています。
この表は、次ように colspan="2"の指定で書かれています。
<table border>
<tr> <td>1111</td> <td>AA</td> <td>BB</td> </tr>
<tr> <td>2222</td> <td colspan="2">AAABBB</td> </tr>
<tr> <td>3333</td> <td>aa</td> <td>bb</td> </tr>
</table>

同様に
Nの行(row)のセルをまとめる時は、<td rowspan="N">と指定して、下の対応する要素を減らします。

1111 AA BB
2222 AABB xx
3333 bb
右のAABBの部分が、2行のセルを一つのセルにまとめた部分です。
つまり、縦方向で2つ分のセルになっています。
この表は、次ように rowspan="2"の指定で書かれています。
<table border>
<tr> <td>1111</td> <td>AA</td> <td>BB</td> </tr>
<tr> <td>2222</td> <td rowspan="2">AABB</td> <td>xx</td></tr>
<tr> <td>3333</td>             <td>bb</td> </tr>
</table>

次のようにcolspanrowspanを 同時に指定することもできます。

1111 AA BB CC
2222 AABB xx
3333 yy
4444 zz
右のAABBの部分が、2列で3行のセルを
一つのセルにまとめた部分です。
この表は、次ように colspan="2"rowspan="3"
指定で書かれています。
<table border>
<tr> <td>1111</td> <td>AA</td> <td>BB</td> <td>CC</td></tr>
<tr> <td>2222</td> <td colspan="2" rowspan="3">AABB</td> <td>xx</td></tr>
<tr> <td>3333</td> <td>yy</td> </tr>
<tr> <td>4444</td> <td>zz</td> </tr>
</table>