本日は前回に引き続きテーブルについてです。
今回のテーブル概要➁では行と列のグループ化について解説します。
それではいってみましょう！
Menu
グループ化
テーブルの行や列をグループ化することにより、コードの可読性がよくなり、CSSの設定もグループ化した要素に設定ができます。
・thead / tbody / tfoot → 行のグループ化
・colgroup → 列のグループ化
➀caption要素
↓
➁colgroup要素
↓
➂thead要素
↓
➃tfoot要素
↓
➄tbody要素
thead / tbody / tfootの概要
・テーブルの行をグループ化をします。
・<thead>～</thead> → テーブルのヘッダー部を1つだけグループ化できます。
・<tfoot>～</tfoot> → テーブルのフッター部を1つだけグループ化できます。
・<tbody>～</tbody> → テーブルのボディー部を複数グループ化できます。
記述の順序
➀thead → ➁tfoot → ➂tbody
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <table border="1"> <!-- ヘッダー --> <thead> <tr> <th>見出しthead</th> <th>見出しthead</th> </tr> </thead> <!-- フッター --> <tfoot> <tr> <td>フッターtfoot</td> <td>フッターtfoot</td> </tr> </tfoot> <!-- ボディー --> <tbody> <tr> <td>データtbody</td> <td>データtbody</td> </tr> </tbody> </table>か |
ブラウザでの表示
ブラウザで表示されるときは、並び順が変わるので注意しましょう。
thead → tbody → tfoot
thead,tbody,tfootのグループ化サンプル
【html】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <table border="1" cellspacing="0" cellpadding="5"> <!-- ヘッダー --> <thead> <tr> <th>注文品</th> <th>金額</th> </tr> </thead> <!-- フッター --> <tfoot> <tr> <th>お会計</th> <td>￥1120</td> </tr> </tfoot> <!-- ボディー1 --> <tbody class="tb1"> <tr> <th>お寿司</th> <th></th> </tr> <tr> <td>中とろ</td> <td>￥300</td> </tr> <tr> <td>うに</td> <td>￥500</td> </tr> </tbody> <!-- ボディー2 --> <tbody class="tb2"> <tr> <th>みそ汁</th> <th></th> </tr> <tr> <td>あら汁</td> <td>￥160</td> </tr> <tr> <td>のり汁</td> <td>￥160</td> </tr> </tbody> </table> |
【CSS】
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | table { border-collapse: collapse; } thead{ background-color: yellow; } tfoot{ background: orange; } tbody.tb1{ background: skyblue; } tbody.tb2{ background: yellowgreen; } |
colgroup要素の概要
テーブルの列をグループ化します。
colgroup要素のグループ設定
・colgroup要素にspan属性を数字で設定。
・col要素にspan属性を数字で設定。
colgroup要素にspan属性を設定
列のグループ化で背景色を設定したサンプル。
【html】
➀span=”2″ → 前の2列を指定(背景色がピンク色)
➁span=”1″ → 次の1列を指定(背景色がスカイブルー)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <body> <table class="test" border="1"> <colgroup span="2" class="col_gp1"></colgroup> <!--①--> <colgroup span="1" class="col_gp2"></colgroup> <!--➁--> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> </tr> <tr> <td>データ4</td> <td>データ5</td> <td></td> </tr> </table> </body> |
【CSS】
1 2 3 4 5 6 | .test colgroup.col_gp1 { background: pink; } .test colgroup.col_gp2 { background: skyblue; } |
col要素にspan属性を設定
列のグループ化で背景色を設定したサンプル。
【html】
➀span=”1″ → 前の1列を指定(背景色がピンク色)
➁span=”2″ → 次の2列を指定(背景色がスカイブルー)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <body> <table class="test" border="1"> <colgroup> <col span="1" class="col_gp1"> <!--①--> <col span="2" class="col_gp2"> <!--➁--> </colgroup> <tr> <td>データ1</td> <td>データ2</td> <td>データ3</td> </tr> <tr> <td>データ4</td> <td>データ5</td> <td>データ6</td> </tr> </table> </body> |
【CSS】
1 2 3 4 5 6 | .test col.col_gp1 { background: pink; } .test col.col_gp2 { background: skyblue; } |
まとめ
グループ化することにより可読性がよくなったり、CSSの設定が楽ちんになるのでテーブルを作成する際はご使用してみてください。
以上です。
