col colgroup要素の概要
表組みをグループ化するHTML | ||||||||||||||
<table><colgroup><col><col></colgroup>~</table> | ||||||||||||||
目的 | 表を列単位でグループ化。これを用いることでグループごとにCSSを適用できるようになる。 | |||||||||||||
関連 | <table> <tr> <td> <caption> <th> <thead> <tfoot> | |||||||||||||
| ||||||||||||||
<caption> は<thead>に含めません。<th>は見出しですから、変動しない項目について使用します。縦方向(列)にグループ化を行います。 <table style="text-align: center;"> <caption>野菜の栽培票</caption> <colgroup> <col class="farm" span="1" /> /* 農場グループ */ <col class="vegetables" span="2" /> /* 野菜グループ */ </colgroup> <thead> <tr> <th>農場</th> <th>ニンジン</th> <th>キャベツ</th> </tr> </thead> <tbody> <tr> <td>みどり農場</td> <td>400</td> <td>120</td> </tr> <tr> <td>きいろ農場</td> <td>100</td> <td>300</td> </tr> </tbody> <tfoot> <tr> <th>合計</th> <td>500</td> <td>420</td> </tr> </tfoot> </table> |
属性
colgroup,col要素の属性
- span
- 列をグループ化する際に、複数の列を指定できる