<colgroup>要素

Technical Summary

定義・配置・content model

適合するHTMLでは、spanは正の整数1〜1000です。colgroupに子のcolがある場合、列数は子のcolが決めるため、親のspanは指定できません。DOM propertyのset時に無効値がどう丸められるかは、markupの適合条件とは別のAPI規則です。

spanと列グループの作り方

列グループの数え方は2通りあります。親のcolgroup spanを使う方法では子のcolを置かず、列ごとに定義する方法ではcolgroupの中にcolを置きます。

<!-- 方式A: 子colを持たず、グループの列数を指定 -->
<colgroup span="2"></colgroup>

<!-- 方式B: 子colごとに表す列数を指定 -->
<colgroup>
  <col span="2">
  <col>
</colgroup>

上の2例は別のtableで使う形です。方式Bでは、1つ目のcolが2列、2つ目が1列を表します。table modelでは列とcolumn groupを別に形成し、行のcellが占めるslotと照合します。列が存在することだけでは、その各slotにcellがあるとは限りません。

td colspanとcol spanは用途が異なります。前者は1つのcellが複数列を覆う値で、後者は列要素が表す列数です。table modelの列幅やcell overlapの検査では両方が関係します。

table model・parser・DOM interface

colgroupはtable直下の構造で、適合するcontent modelでは任意のcaptionの後、theadと表本体より前に置きます。HTML parserはtable insertion modesに従ってDOMを構築します。parser recoveryで要素が補われても、入力markupが適合するとは限りません。

colgroupとcolはともにHTMLTableColElementを使います。spanはIDL上、初期値1、反映範囲1〜1000のunsigned longです。table全体の列collectionを返す専用APIはこのinterfaceに定義されていません。

const group = document.querySelector("colgroup");
const column = group.querySelector("col");

group instanceof HTMLTableColElement; // true
column instanceof HTMLTableColElement; // true
group.span;                            // 1 by default
column.span;                           // 1 by default

// The table's data cells are still descendants of rows,
// not descendants of colgroup or col.

CSS column boxes

HTMLの列要素はtableのcellをDOM上で包みません。CSS table modelでは列・列グループのboxが別のlayerとして扱われ、column boxに適用できるpropertyは限られます。CSS 2.1はbackground、width、visibility、borderを挙げています。

CSS selectorでcolgroupの子としてcellを選ぶことはできません。列ごとの背景などを指定できますが、文字色、padding、cell borderなどをすべて列要素から制御できるわけではありません。各ブラウザーの実装範囲はこのページの一部のfixtureとWPTに限定されています。

.highlighted-columns {
  background-color: #eaf3ff;
}

<colgroup span="2" class="highlighted-columns"></colgroup>

見出し関係とAccessibility mapping

colgroupは列グループを表す構造であり、列見出しの文字やcell-to-header associationを代わりに作るものではありません。読者に列名を伝える場合は、tableのcellとしてthを置き、構造に応じてscopeやheadersで関係を表します。scope="colgroup"は、実際に対応するcolumn groupがある場合に限って使います。

HTML-AAM Editor's Draftでは、colはARIA roleにも各掲載platform APIにもmappingされません。colgroupもcomputed roleはなく、MSAA + IAccessible2ではROLE_SYSTEM_GROUPING、UIAではGroup（localized control type colgroup）へのmappingが記載されています。ATKとApple AXはNot mappedです。

仕様上のmappingと、特定browserがAccessibility treeに何を公開するか、OS APIの出力、screen readerの読み上げは別々のEvidenceです。下のAAM observationはChromeのbrowser accessibility tree queryであり、platform APIや支援技術を直接測った結果ではありません。

Fact / Evidence（主張 / 根拠）

規範的な仕様上の主張、CSSの適用条件、AAM mappingをEvidenceと対応付けています。観測結果と未完了範囲はImplementation EvidenceとCoverageに分けています。

Evidence

1. HTML Standard: The colgroup element — meaning, context, content model, tag omission, span, and DOM interface
2. HTML Standard: The col element — context, empty content model, span, and table model
3. HTML Standard: The table element — permitted child order
4. HTML Standard: Forming a table — column groups, columns, slots, and cell spans
5. HTML Standard: The “in table” insertion mode — parser handling of table children
6. CSS 2.1: Columns — properties applicable to column and column-group boxes
7. HTML-AAM: colgroup and col — platform-specific role mappings
8. Web Platform Tests: col-span-limits.html — selected span reflection and table layout checks
9. Web Platform Tests: colgroup-col.html — tentative CSS table column and group width checks

Implementation Evidence

ブラウザー実装、選定WPT、Accessibility tree queryは別々に記録します。各結果は記載した環境・fixture・test範囲に限られます。

Coverage / Open Issues

• SPEC意味、配置、content model、span、DOM interface、table model、CSS 2.1のcolumn properties、HTML-AAM mapping
• IMPLfixtureとChrome 1環境での一部観測。他browser、OS build、印刷、複雑なrowspan/colspan gridは未測定
• WPT選定testのみ。wpt.liveの配信revision、全test directory、他browserは未確認
• AAMChrome browser accessibility tree queryのみ。Windows UI Automation、IAccessible2、ATK、Apple AX、支援技術の発話は未測定
• ReviewExpert-gap Reviewは未完了

このTopicは初期Coverageです。選定fixtureやWPTが通っても、すべてのHTML構造、browser、OS、CSS実装、支援技術で同じ結果になるとは主張しません。

関連Surface

初心者向けの例はYugienのcolgroup要素ページとcol要素ページを参照してください。列要素の詳細はcol Topic、表全体の構造はtable Topic、見出し行はthead Topic、見出しcellの関係はth Topic、表のsummary row groupはtfoot Topicで扱います。