グリッド全体を先に描き、結合セルごとに四角形を割り当て、その四角形の開始位置にだけセルを書いて、セル範囲がかみ合うHTMLテーブルを計画します。このガイドでは、TextEditで作成し、Macでプレビューできる架空の例を順に説明します。

セルを書く前にグリッドを定義する

目標は、列見出しのグループ、行と列の両方にまたがるセル、そして異なる行数にまたがる別のセルを含む、5列のテーブルを1つ作ることです。以下のラベルと内容は説明用です。スロットごとに並べた中立的なノードブロックを表しています。

HTMLテーブルは多次元データを表します。セルは重なりなくテーブルのグリッドを埋めなければなりません。無関係なボックスをページ上に配置したいだけなら、HTML標準では代わりにCSS Gridなどのレイアウトツールを使うよう案内しています。ここでは各ブロックが行見出しや列見出しと意味のある関係を持つため、テーブルが適しています。HTML Standard: The table element。

まず、テーブル内のどこかに存在する最小単位の列に名前を付けます。この例では、Slot、Node A、Node B、Node C、Noteです。Nodes見出しはそのうち3列を覆いますが、列を新たに追加するわけではありません。

2つのspan属性は、開始位置を含むセル全体の占有範囲を数えます。つまり、colspan="2"は2列を覆い、rowspan="2"は2行を覆います。両方を指定すると、2行×2列の四角形になります。省略したspanの既定値は1です。MDN: The Table Data Cell element。

「かみ合う」とは、これらの四角形がどのように収まるかを表します。個々のセルの占有範囲は常に四角形です。1つのセルが別のセルを避けて曲がることはできません。方眼紙にラベル付きの四角形を配置するように考えてください。

各行のスロット台帳を作る

結合セルの占有範囲が分かるよう、繰り返しのラベルを使った拡張計画表を作ります。この台帳でラベルを繰り返すことは、HTMLでそのセルを繰り返すという意味ではありません。ヘッダーセクションは2行、本文は4行です。

計画上の行 列1 列2 列3 列4 列5
ヘッダー1 Slot Nodes Nodes Nodes Note
ヘッダー2 Slot Node A Node B Node C Note
本文1 Slot 1 Block P Block P Block Q Note X
本文2 Slot 2 Block P Block P Block R Note X
本文3 Slot 3 Block S Block T Block T Note X
本文4 Slot 4 Block U Block U Block U Note Y

次に、結合された各四角形の開始位置と寸法を記録します。座標は1始まりで、各セクション内で数え直します。

セル 開始位置 行数 列数
Slot見出し ヘッダー行1、列1 2 1
Nodes見出し ヘッダー行1、列2 1 3
Note見出し ヘッダー行1、列5 2 1
Block P 本文行1、列2 2 2
Note X 本文行1、列5 3 1
Block T 本文行3、列3 1 2
Block U 本文行4、列2 1 3

この台帳があれば、難しい本文の2行目も簡単です。Block Pがすでに列2と3を占め、Note Xが列5を占めています。そこから始まるのはSlot 2とBlock Rだけなので、この行に必要なセル要素は2つだけです。

各行で次の手順を使います。

  1. 前の行で始まったspanが占める位置に印を付けます。
  2. 最初の空き列を見つけます。
  3. 次のセルを配置し、将来の行も含む四角形全体に印を付けます。
  4. 四角形の一部でもすでに占有された位置と重なる場合は、その四角形を使いません。
  5. 5列すべての位置が割り当てられるまで続けます。

この手順は、標準のテーブルモデルをもとにした計画用の補助手段です。ブラウザーはセルを配置する際、すでに占有されている開始位置を飛ばしますが、作成者は四角形が重ならないようにする必要があります。そのため、行内のセル要素の数を数えるだけでは不十分です。HTML Standard: Processing model。

行を確認する際は、前の行から引き継いだ占有列数＋新たに始まるセルが覆う列数＝5を目安にします。本文の2行目では、引き継いだ位置が3つ、新しい位置が2つです。本文の3行目では、引き継いだ位置が1つ、新しい位置が4つです。合計だけでなく、実際の位置も確認してください。合計が合っていても、重なりと空きが同時にあれば見つけられません。

行グループと見出しの関係を計画する

2行のヘッダーは1つのtheadに、4行の本文は1つのtbodyにまとめます。セルは別々の行グループをまたげません。例えば、ブロックPは、あるtbody内で始まり、別の行グループ内で終わることはできません。また、標準ではテーブルの子要素の順序も定められています。任意のcaption、列グループ、任意のthead、本文の行、任意のtfootの順です。HTML Standard: Tables。

この例では、Slot用に1列、Nodes用に3列、Note用に1列の、3つの列グループを定義します。Nodes見出しにはscope="colgroup"を使い、その下位の見出しにはscope="col"を使います。W3Cの不規則な見出しに関するガイダンスでは、グループ見出しと明示的な列グループ構造を組み合わせています。Tables with Irregular Headers。

構造上の範囲と意味上の関係は、別々に決める必要があります。Block Pは2つのスロット行と2つのノード列を覆うため、対応する見出しはSlot 1、Slot 2、Nodes、Node A、Node Bです。Note Xは3つのスロット行とNote列に属します。

これらの結合データセルについて、例ではヘッダーセルのid値と、各データセルのheaders属性に空白区切りで記した参照を使い、対応関係を明示しています。W3Cは、見出し間の関係を明示的に識別する必要がある複雑なテーブル向けに、この方法を説明しています。Tables with Multi-Level Headers。

テキストが同じというだけで、独立した値を結合しないでください。この架空の文書では、Block Pは意図的に4つの位置にまたがる1つのブロックを表しています。各位置に別々の観測値が入るなら、その区別を保てるよう個々のセルを残してください。

MacでHTMLファイル全体を作成する

TextEditでローカルのHTML文書を作成できます。File > Newを選び、続いてFormat > Make Plain Textを選びます。以下の完全な文書を貼り付けて、File > Saveを選び、span-plan.htmlという名前で保存します。拡張子について確認されたら、Use .htmlを選びます。これはAppleが案内しているHTML作成手順です。Work with HTML documents in TextEdit on Mac。

以下はサンプルの内容とスタイルを含む、単独で完結した文書です。スクリプトや外部アセットは必要ありません。

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Interlocking span plan</title>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
table { border-collapse: collapse; }
caption { text-align: left; font-weight: bold; margin-bottom: 1rem; }
th, td { border: 1px solid #555; padding: 0.75rem; text-align: left; }
thead { background: #eee; }
</style>
</head>
<body>
<table>
  <caption>Synthetic node blocks by slot</caption>
  <colgroup span="1"></colgroup>
  <colgroup span="3"></colgroup>
  <colgroup span="1"></colgroup>
  <thead>
    <tr>
      <th rowspan="2" scope="col" id="slot">Slot</th>
      <th colspan="3" scope="colgroup" id="nodes">Nodes</th>
      <th rowspan="2" scope="col" id="note">Note</th>
    </tr>
    <tr>
      <th scope="col" id="a">Node A</th>
      <th scope="col" id="b">Node B</th>
      <th scope="col" id="c">Node C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" id="s1">Slot 1</th>
      <td rowspan="2" colspan="2" headers="s1 s2 nodes a b">Block P</td>
      <td headers="s1 nodes c">Block Q</td>
      <td rowspan="3" headers="s1 s2 s3 note">Note X</td>
    </tr>
    <tr>
      <th scope="row" id="s2">Slot 2</th>
      <td headers="s2 nodes c">Block R</td>
    </tr>
    <tr>
      <th scope="row" id="s3">Slot 3</th>
      <td headers="s3 nodes a">Block S</td>
      <td colspan="2" headers="s3 nodes b c">Block T</td>
    </tr>
    <tr>
      <th scope="row" id="s4">Slot 4</th>
      <td colspan="3" headers="s4 nodes a b c">Block U</td>
      <td headers="s4 note">Note Y</td>
    </tr>
  </tbody>
</table>
</body>
</html>

保存したファイルをMacのブラウザーで開きます。台帳と見比べてください。Block PはNodesのNode AとNode Bの下でSlot 1と2にまたがり、Note XはSlot 1～3にまたがり、Block TはSlot 3のNode BとNode Cだけを覆うはずです。この3点を確認すれば、単に外形が四角いだけのテーブルと、意図したかみ合うパターンとを見分けられます。

TextEditでファイルを開き直したときに書式付きの内容が表示される場合は、File > Openを選び、ファイルを選択してShow Optionsをクリックし、Ignore rich text commandsを選択します。以後の編集について、AppleはTextEdit > Settings > Open and Saveで、Display HTML files as HTML code instead of formatted textを有効にする方法も案内しています。Apple’s TextEdit HTML guide。

構造を保ちながら誤りを見つけ、計画を更新する

結果が計画と異なる場合は、最初に誤っている行と、そこに引き継がれている四角形を確認します。間隔やスタイルを変更する前に、次の点を確認してください。

症状 確認すること この例での修正
予期しない列が追加される 以前のspanですでに占有されている位置にセルを追加していないか 本文2行目にあるのはSlot 2とBlock Rだけです。埋め草のセルがあれば削除します
Block Rが別のノードの下に表示される Block Pの幅と高さ Block Pにrowspan="2"とcolspan="2"の両方が設定されていることを確認します
Note XがSlot 2の後で終わる 行数 spanを3行に設定します
ヘッダーの段がそろわない 最初のヘッダー行と2行目のセル数 SlotとNoteは2行にまたがります。2行目のヘッダーに含まれるのは3つのノード見出しだけです
結合セルに対応する見出しがそろっていない headersの参照 台帳を使い、セルが覆うすべての行と列を確認します

空セルが適切なのは、その位置が実際に空の値を表す場合です。spanセルがすでに占有している位置には必要ありません。MDNのセルに関する説明では、通常のセルは空いている位置に配置され、spanは重なってはならないとされています。MDN: The Table Data Cell element。

この固定例では、明示的に正の行数を指定します。特殊な値rowspan="0"は、現在の行グループの残りの行を意味するため、行を追加するとそのセルの範囲も広がることがあります。「このグループの最後まで」という関係を意図している場合に限り、この値を使ってください。MDN: Row span behavior。

行を挿入、削除、並べ替える前に、台帳を更新します。Slot 1とSlot 2の間に行を挿入し、Block Pにその行も含める場合は、Block Pのspanを増やし、新しい行見出しをそのheadersのリストに追加します。Note Xについては別個に見直してください。同じ挿入によって、意図する範囲が変わる場合もあります。行の並べ替えでも同様の確認が必要です。spanは文書内の位置に従うからです。

内容が理解しやすい四角形を成さなくなった場合は、表示方法を簡素化してください。W3Cは、複数階層の見出しで1つのテーブルが分かりにくくなる場合、小さなテーブルに分けることを検討するよう勧めています。Tables with Multi-Level Headers。

文書を改訂する際は、スロット台帳をソースのそばに置いておきます。変更のたびに、意図する四角形を確定し、開始位置にだけセルを書き、対応する見出しを確認してください。これにより、テーブルの形と、内容が表す関係の両方を保つ手順を繰り返し実行できます。

参考資料