col colgroup 表組みの列グループ コピペで使えるHTML+CSS

スポンサーリンク
スポンサーリンク

col colgroup要素の概要

表組みをグループ化するHTML
<table><colgroup><col><col></colgroup>~</table>
目的 表を列単位でグループ化。これを用いることでグループごとにCSSを適用できるようになる。
関連 <table> <tr> <td> <caption> <th> <thead> <tfoot>
野菜の栽培票
農場 ニンジン キャベツ
みどり農場 400 120
きいろ農場 100 300
合計 500 420

<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
列をグループ化する際に、複数の列を指定できる

CSSデザイン