HTML <colgroup>

<COLGROUP>と</COLGROUP>の間にある複数の<COL>タグをまとめて1つのグループにします。複数の<COL>タグに対して、まとめて属性を指定するときに便利です。

書式

<colgroup>
  <!--  Zero or more col and template elements. -->
</colgroup>

HTMLでは終了タグを省略できます。XHTMLでは省略できません。開始タグと終了タグの間にはCOL要素タイプが任意回数表れます。 TABLE要素タイプの内容モデルで、<table> と </table> の間に任意回数現れます。

終了タグ

colgroup要素の終了タグは、colgroup要素の直後にASCIIホワイトスペースやコメントがない場合、省略することができる。

<colgroup span="2">

コンテンツモデル

colgroup要素タイプの開始タグと終了タグの間には、0個以上のcol要素タイプを入れることができる。

<colgroup>
  <col>
  <col>
</colgroup>

ただし、colgroup要素タイプにspan属性を指定した場合、コンテンツモデルは空である。この場合、colgroup要素タイプの開始タグと終了タグの間に要素やテキストを入れることはできない。

<colgroup span="2></colgroup>

属性

以下に示す属性をcolgroup要素タイプに指定することができる。colgroup要素タイプに必須な属性は無い。

class

CSSのクラスを指定する。空白で区切って、複数のクラスを指定できる。

id

要素毎に固有な識別子を指定する。識別子はCSSやJavaScriptから要素を識別するときに利用する。

span

要素にまたがる列の数を指定する。span属性を指定した場合は、colgroup要素のコンテンツモデルは空になり、開始タグと終了タグの間に要素やテキストを入れることはできない。

<table>
  <colgroup span="2" style="background-color: aquamarine"></colgroup>
  <thead>
    <tr>
      <th>コード<th>
      <th>金融機関<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
  </tbody>
</table>

コード	金融機関
0001	みずほ銀行
0005	三菱UFJ銀行
0009	三井住友銀行

style

CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定できる。

<table>
  <colgroup style="background-color: aquamarine">
    <col>
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>コード<th>
      <th>金融機関<th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>0001</td>
      <td>みずほ銀行</td>
    </tr>
    <tr>
      <td>0005</td>
      <td>三菱UFJ銀行</td>
    </tr>
    <tr>
      <td>0009</td>
      <td>三井住友銀行</td>
    </tr>
  </tbody>
</table>

コード	金融機関
0001	みずほ銀行
0005	三菱UFJ銀行
0009	三井住友銀行

JavaScript

JavaScript からは HTMLTableColElement インタフェースを通じて colgroup 要素へアクセスできる。HTMLTableColElement インタフェースは以下に示すプロパティを持つ。

span: span属性
title: title属性
lang: lang属性
translate: translate属性
dir: dir属性
hidden: hidden属性
inert: inert属性
accessKey: accessKey属性
accessKeyLabel: 要素に割り当てられたアクセスキー
draggable: draggable属性
spellcheck: spellcheck属性
autocapitalize: autocapitalize属性
innerText: 要素内のコンテンツ（タグを含まない）
outerText: 要素内のコンテンツ（タグを含む）

参考文献

Web Hypertext Application Technology Working Group 2023. Tabular data. HTML Living Standard

HTML <colgroup>

書式

終了タグ

コンテンツモデル

属性

JavaScript

関連記事

参考文献