colgroupについて理解する

概要

table内の列のグループを定義します。
子要素であるcol要素のspan属性の値によりスタイルを当てる列を決められます。

背景

業務でcolgroupのスタイルを変更することでtable要素のセルの幅を変更しました。

<colgroup>
    <col class="pct76">
    <col class="pct21">
    <col class="pct21">
    <col class="pct21">
    <col class="pct21">
</colgroup>

復習のため、colgroupについて勉強します。

colgroupとは

表内の列のグループを定義します

サンプルコード

See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.

colとは

表内の列を定義して、すべての一般セルに共通の意味を定義するために使用します。この要素は通常、<colgroup>要素内にみられます

<col> ではCSSを使用して列にスタイルを設定できます。以下が使用できるプロパティです。

• border
• background
• width
• visivility

span属性とは

<col>要素がまたがる列の数を示します。存在しない場合、既定値は1です。

See the Pen Untitled by 山根大生 (@uuylkesg-the-styleful) on CodePen.

理解する為に先ほどのサンプルコードのspan属性を試しに修正します。
１つ目のcol要素によって左から1番目の列は管理されています。
上から2つ目のcol要素は左から2列目以降の列が対象です。
上から2つ目のcol要素のspan属性を3,上から3つ目のcol要素のspan属性を1にします。

<colgroup>
    <col /> //左から1列目
    <col span="3" class="batman" /> //左から2列〜4列目
    <col span="1" class="flash" />　//左から5列目
</colgroup>

すると、列の色が変わります。
The Flashの列も青色になりました。
class属性batmanは上から2番目のcol要素で指定されていて、これにより左から１列飛ばして、3列分スタイルが当てられています。

.batman {
  background-color: #d7d9f2;
}

.flash {
  background-color: #ffe8d4;
}

th要素のscope属性とは（おまけ）

この (<th>で定義されている) 見出し要素が関連するセルを定義します。次の値を取ることができます。

• row: この見出しはその行に属するすべてのセルに関連します
• col: この見出しはその列に属するすべてのセルに関連します
• rowgroup: この見出しは行グループに属し、その中のすべてのセルに関連します
• colgroup: この見出しは列グループに属し、その中のすべてのセルに関連します

もし scope 属性が指定されていないか、その値が row, col, rowgroup, colgroup でない場合は、ブラウザーは自動的に見出しセルが適用されるセルの集合を選択します

今回のサンプルコードだと以下のth要素は列に関連しています

<th scope="col">Batman</th>

以下のth要素は行に関連しています

<th scope="row">Skill</th>

最後に

colgroupで列のスタイルを管理できることを手を動かして学べました。
引き続き業務から復習してキャッチアップしていきます。