ここでは簡単な表を作りながら、表組みを説明していこうと思います。関係ある要素は、table、caption、col、colgroup、tbody、td、tfoot、th、thead、trです。
今回は東京都23区の人口と世帯数の表を作ってみます。まず、table要素がないと始まりませんね。table要素ではsummary属性を指定します。そして表題をつけたいのでcaption要素です。
<table summary="この表は東京都23区の人口と世帯数、その合計を示す。">
<caption>東京都23区の人口と世帯数（2001年3月31日現在）</caption>
表を組む時には1行のまとまりを示すのがtr要素、その中身のセルひとつずつがtd要素、または見出しであるth要素となります。一番上の行は見出しにしたいのでth要素でマークアップします。
<table summary="この表は東京都23区の人口と世帯数、その合計を示す。">
<caption>東京都23区の人口と世帯数（2001年3月31日現在）</caption>
<tr><th>区の名前</th><th>人口</th><th>世帯数</th></tr>
ここまで書いて思いましたがここは印刷されたときに複数ページになってもいいようにヘッダーにしましょう。
<table summary="この表は東京都23区の人口と世帯数、その合計を示す。">
<caption>東京都23区の人口と世帯数（2001年3月31日現在）</caption>
<thead>
<tr><th>区の名前</th><th>人口</th><th>世帯数</th></tr>
</thead>
こうすることで複数ページになってもヘッダーの部分はどのページでも一番上に印刷され見易くなります。
次はデータの部分です。これは本体ですのでtbody要素で、各セルはtd要素でマークアップします。
<table summary="この表は東京都23区の人口と世帯数、その合計を示す。">
<caption>東京都23区の人口と世帯数（2001年3月31日現在）</caption>
<thead>
<tr><th>区の名前</th><th>人口</th><th>世帯数</th></tr>
</thead>
<tbody>
<tr>
<td>足立区</td><td>618,948</td><td>267,840</td>
</tr>
<tr>
<td>荒川区</td><td>172,504</td><td>80,190</td>
</tr>
<tr>
<td>板橋区</td><td>499,349</td><td>239,680</td>
</tr>
---略---
<tr>
<td>23区合計</td><td>7,969,654</td><td>3,870,891</td>
</tr>
</tbody>
</table>
ここまででこれくらいの表ができあがっています。今回はcaption要素やthead要素がでてきましたが、table要素内にはtbody要素だけがひとつ以上必須なので省いても構わないと思われます。
見栄えと言ってもたいしたことはしません。では、表に枠を付けるためにtable要素のborder属性を指定してみます。今回は1としていますが好きな太さにしてみてください。
<table summary="この表は東京都23区の人口と世帯数、その合計を示す。" border="1">
<caption>東京都23区の人口と世帯数（2001年3月31日現在）</caption>
ここから先はCSSで指定します。caption要素を枠で囲み、各セル内の文字を中揃えにして、最後の合計のところを太字、背景色を変えます。
caption {
border-width:thin;
border-color:#c0c0c0;
border-style:outset
}
tbody {
text-align:center;
}
tr.footer {
font-weight:bold;
background-color:#c0c0c0
}
caption要素とtbody要素はCSSで要素単位で宣言していますので、これだけでスタイルが適用されますが、合計のところはclass属性で指定します。
<tr class="footer">
<td>23区合計</td><td>7,969,654</td><td>3,870,891</td>
</tr>
音声ブラウザでは表の行を左から右へ読み上げます(日本語環境の場合）。今回の表だと「足立区 618,948 267,840」と読み上げるでしょう。しかしこれでは途中で読み上げられた数値がなんだったのかわからなくなる可能性があります。このような場合、headers属性かscope属性をth要素、td要素で指定すれば「区の名前 足立区 人口 618,948 世帯数 267,840」と読み上げてくれるようになります。
今回は単純な表なのでscope属性でやろうかと思いましたが、最後の合計の行が「区の名前 合計 人口 7,969,654 世帯数 3,870,891」のように合計と言う名の区があるかのように読み上げられるのでheaders属性にします。
まず、あらかじめ見出し情報を提供する側のセルにid属性で名前を付けます。
<table summary="この表は東京都23区の人口と世帯数、その合計を示す。">
<caption>東京都23区の人口と世帯数（2001年3月31日現在）</caption>
<thead>
<tr><th id="kumei">区の名前</th>
<th id="population">人口</th>
<th id="households">世帯数</th></tr>
</thead>
あとは各セルのheaders属性で見出しを提供しているセルの名前を指定するだけです。
<table summary="この表は東京都23区の人口と世帯数、その合計を示す。">
<caption>東京都23区の人口と世帯数（2001年3月31日現在）</caption>
<thead>
<tr><th id="kumei">区の名前</th>
<th id="population">人口</th><th id="households">世帯数</th></tr>
</thead>
<tbody>
<tr>
<td headers="kumei">足立区</td>
<td headers="population">618,948</td>
<td headers="households">267,840</td>
</tr>
<tr>
<td headers="kumei">荒川区</td>
<td headers="population">172,504</td>
<td headers="households">80,190</td>
</tr>
<tr>
<td headers="kumei">板橋区</td>
<td headers="population">499,349</td>
<td headers="households">239,680</td>
</tr>
---略---
<tr>
<td>23区合計</td>
<td>7,969,654</td>
<td>3,870,891</td>
</tr>
</tbody>
</table>
これで23区の人口の表はできあがりました。あとはいろいろと見栄えを変えたりして自分好みの表にしてみてください。
前にも書きましたがtableは表組みです。レイアウト目的で使用すると音声ブラウザでは正しく読み上げてもらえない可能性がありますので、お勧めしません。