テーブルは <thead> <tbody> <tfoot> に分ける事が出来ます。
<table border="1" cellpadding="2" cellspacing="0">
<thead bgcolor="#d0d0d0">
<tr>
<th>学期\教科</th><th>国語</th><th>数学</th><th>理科</th>
</tr>
</thead>
<tfoot bgcolor="#f0f0f0">
<tr>
<th>合計</th><td>210</td><td>220</td><td>230</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>1学期</th><td>60</td><td>70</td><td>90</td>
</tr>
<tr>
<th>2学期</th><td>80</td><td>70</td><td>70</td>
</tr>
<tr>
<th>3学期</th><td>70</td><td>80</td><td>70</td>
</tr>
</tbody>
</table>
学期\教科
| 国語
| 数学
| 理科
|
合計
| 210 |
220 |
230 |
1学期
| 60 |
70 |
90 |
2学期
| 80 |
70 |
70 |
3学期
| 70 |
80 |
70 |
ソースを<thead> <tbody> <tfoot>別に色分けしてみました。
ブラウザによっては正しく表示されないかも知れませんが、上から <thead> <tfoot> <tbody> の順で書き、
表示は <thead> <tbody> <tfoot> の順になります。
今回は <thead> <tbody> <tfoot> に bgcolor でセルの色を付けましたが、<tr>
単位、つまり行単位でも出来ます。行のグループ化は <tr> で良いような気がします。
<thead> <tbody> <tfoot> はグループ化と言うより、表計算用みたいな感じですね。
HTMLでは <tbody> の省略が出来ます。しかし <thead> や <tfoot> を使った場合は、 <tbody>
の省略は出来ません。
注1:
太文字でセンター表示になっているのは、<td> の代わりに <th> を使っているからです。
注2:
<th> でもブラウザによっては太文字でセンター表示にならない可能性もあります。
<col> <colgroup> は縦列のセルをグループ化するものです。
<table border="1" cellpadding="2" cellspacing="0">
<caption>果物の色別表</caption>
<colgroup>
<col span="1" bgcolor="#ffff66" align="center" width="80">
<col span="1" bgcolor="#99cc99" align="center" width="80">
<col span="2" bgcolor="#ff6699" align="center" width="80">
</colgroup>
<tr>
<th>黄色系</th>
<th>緑系</th>
<th colspan="2">赤系</th>
</tr>
<tr>
<td>レモン</td>
<td>スイカ</td>
<td>さくらんぼう</td>
<td>モモ