最終更新日

colgroup要素

colgroup要素は、列をまとめて1つのグループにします。列をグループ化することで、その列に意味を持たせられるほか、CSSを使ってグループ単位でスタイルを変えたりすることが可能です。グループ化の対象とする列は、colgroup要素のspan属性、またはcol要素で指定します。

span属性を使う場合は、値として1以上の整数を指定します。その場合、colgroup要素は子要素やコンテンツを持たない空要素となります。

子要素にcol要素を含める場合は、グループに含める各列をcol要素で指定します。colgroup要素のspan属性は指定しません。

colgroup要素の終了タグは、colgroup要素の直後がスペース文字かコメントでなければ省略可能です。

また、colgroup要素の開始タグは、colgroup要素がcol要素で始まる場合で、直前に終了タグが省略された別のcolgroup要素が置かれていなければ、省略可能です。

colgroup要素は、table要素内でcaption要素の後ろ、theadtbodytfoottrの各要素の前に記述します。

HTML5での変更点
特にありません
カテゴリ タグの省略 親要素 子要素
なし 省略可能 table span属性あり:なし
span属性なし:col
属性 説明
span 数値 列の数を整数で指定します。
グローバル属性 - -
イベント属性 - -
サンプルコード
<body>
  <table border="1">
    <caption>料金表</caption>
    <colgroup span="2">
    <tbody>
      <tr>
        <th>商品名</th>
        <th>料金</th>
      </tr>
      <tr>
        <td>ハンバーガー</td>
        <td>100円</td>
      </tr>
      <tr>
        <td>チーズバーガー</td>
        <td>120円</td>
      </tr>
    </tbody>
  </table>
</body>
参考文献:W3C HTML5「4.9.3 The colgroup element」外部リンク
HOME
当サイトの活動をサポートしてみませんか?気軽にクリエイターの支援ができます。