<col>タグは、列グループ内の列を表すを表す際に使用します。
table要素の下にある
colgroup要素の子要素として配置されたcol要素は、
そのcolgroup要素によって表される列グループ内の1つ以上の列を表します。
col要素のspan属性は、親となるcolgroup要素がまたがる列の数を指定します。
span属性の値は、0より大きく1000以下の正の整数である必要があります。
col要素は、span属性を持たないcolgroup要素の子として配置します。
HTMLの仕様では、col要素には終了タグ</col>はありません。
以下のサンプルは、colgroup要素で4つの列グループを作成しています。
1つの列グループ内には1つ、または、2つのcol要素が含まれています。
<style>
.kondate { border-collapse: collapse; border: solid thick; }
.kondate colgroup, table#kondate tbody { border: solid medium; }
.kondate td { border: solid thin; height: 1.4em; width: 3em; text-align: center; padding: 0; }
</style>
<table class="kondate">
<caption>献立材料表</caption>
<colgroup><col></colgroup>
<colgroup><col><col></colgroup>
<colgroup><col><col></colgroup>
<colgroup><col><col></colgroup>
<tbody>
<tr><th>曜日</th><th>米</th><th>パン</th><th>肉</th><th>魚</th><th>野菜</th><th>根菜</th></tr>
<tr><td>月</td><td>〇</td><td> </td><td>〇</td><td> </td><td>〇</td><td> </td></tr>
<tr><td>火</td><td>〇</td><td> </td><td> </td><td>〇</td><td> </td><td>〇</td></tr>
<tr><td>水</td><td> </td><td>〇</td><td>〇</td><td> </td><td>〇</td><td> </td></tr>
<tr><td>木</td><td>〇</td><td> </td><td> </td><td>〇</td><td>〇</td><td> </td></tr>
<tr><td>金</td><td>〇</td><td> </td><td>〇</td><td> </td><td> </td><td>〇</td></tr>
<tr><td>土</td><td>〇</td><td> </td><td>〇</td><td> </td><td>〇</td><td> </td></tr>
<tr><td>日</td><td> </td><td>〇</td><td> </td><td>〇</td><td>〇</td><td> </td></tr>
</tbody>
</table>
曜日 | 米 | パン | 肉 | 魚 | 野菜 | 根菜 |
---|---|---|---|---|---|---|
月 | 〇 | 〇 | 〇 | |||
火 | 〇 | 〇 | 〇 | |||
水 | 〇 | 〇 | 〇 | |||
木 | 〇 | 〇 | 〇 | |||
金 | 〇 | 〇 | 〇 | |||
土 | 〇 | 〇 | 〇 | |||
日 | 〇 | 〇 | 〇 |
以下のサンプルは、上記サンプルと同じくcolgroup要素で4つの列グループを作成しています。
上記サンプルでは各グループの列の数をcol要素の個数で指定していますが、
下記サンプルでは各グループの列の数をcol要素のspan属性の値で指定しています。
<table class="kondate">
<caption>献立材料表</caption>
<colgroup><col span="1"></colgroup>
<colgroup><col span="2"></colgroup>
<colgroup><col span="2"></colgroup>
<colgroup><col span="2"></colgroup>
<tbody>
<tr><th>曜日</th><th>米</th><th>パン</th><th>肉</th><th>魚</th><th>野菜</th><th>根菜</th></tr>
<tr><td>月</td><td>〇</td><td> </td><td>〇</td><td> </td><td>〇</td><td> </td></tr>
<tr><td>火</td><td>〇</td><td> </td><td> </td><td>〇</td><td> </td><td>〇</td></tr>
<tr><td>水</td><td> </td><td>〇</td><td>〇</td><td> </td><td>〇</td><td> </td></tr>
<tr><td>木</td><td>〇</td><td> </td><td> </td><td>〇</td><td>〇</td><td> </td></tr>
<tr><td>金</td><td>〇</td><td> </td><td>〇</td><td> </td><td> </td><td>〇</td></tr>
<tr><td>土</td><td>〇</td><td> </td><td>〇</td><td> </td><td>〇</td><td> </td></tr>
<tr><td>日</td><td> </td><td>〇</td><td> </td><td>〇</td><td>〇</td><td> </td></tr>
</tbody>
</table>
曜日 | 米 | パン | 肉 | 魚 | 野菜 | 根菜 |
---|---|---|---|---|---|---|
月 | 〇 | 〇 | 〇 | |||
火 | 〇 | 〇 | 〇 | |||
水 | 〇 | 〇 | 〇 | |||
木 | 〇 | 〇 | 〇 | |||
金 | 〇 | 〇 | 〇 | |||
土 | 〇 | 〇 | 〇 | |||
日 | 〇 | 〇 | 〇 |