テーブルの行を、ヘッダ行、フッタ行、ボディ行に明示的に分ける場合のボディ行を指定します。
.table1 {
border-collapse: collapse;
}
.table1 th, .table1 td {
border: 1px solid gray;
}
<table class="table1" style="border-collapse:collapse; width:250px;"> <caption>【表の例】</caption> <thead style="background-color:#ccc;"> <tr> <th>品名</th> <th>単価</th> <th>個数</th> <th>価格</th> </tr> </thead> <tbody> <tr> <td>ぬいぐるみ</td> <td>3,200</td> <td>1</td> <td>3,200</td> </tr> <tr> <td>チョコレート</td> <td>800</td> <td>3</td> <td>2,400</td> </tr> </tbody> <tfoot> <tr> <td>合計</td> <td><br></td> <td><br></td> <td>5,600</td> </tr> </tfoot> </table>
| 品名 | 単価 | 個数 | 価格 |
|---|---|---|---|
| ぬいぐるみ | 3,200 | 1 | 3,200 |
| チョコレート | 800 | 3 | 2,400 |
| 合計 | 5,600 |
HTML4.01では、ヘッダとフッタを先読みして表示するために、<tbody> よりも <tfoot> の方を先に記述しなくてはならないと定義されています。しかし、この仕様に対応しないブラウザも少なからずありました。
<table> <thead><tr><td>HEAD</td></tr></thead> <tfoot><tr><td>FOOT</td></tr></tfoot> <tbody><tr><td>BODY</td></tr></tbody> </table>
HTML5 では <tfoot> と <tbody> の順番はどちらでもよいことになりました。さらに HTML 5.1 では、<tbody> → <tfoot> の順番で記述するよう、仕様が改めました。