<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
要素毎に固有な識別子を指定する。識別子はCSSJavaScriptから要素を識別するときに利用する。
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 三井住友銀行

関連記事

参考文献

Web Hypertext Application Technology Working Group (2022) "Tabular data" HTML Living Standard