【実務・中級編】rowspan属性による行結合 – HTML実践ガイド

テーブルの「行結合」で沼るな。rowspanを正しく操るための現場的解法

フロントエンド開発の現場で、テーブル（`

`）のマークアップを命じられたとき、ふと「あ、ここ行をまたいで結合したいな」と思う瞬間がありますよね。仕様書を眺めて「まあ`rowspan`を書けばいいだけでしょ」と高を括って実装し、結果として表示がガタガタに崩れて頭を抱えた経験、一度はあるはずです。

`rowspan`は、一見シンプルですが、ブラウザの描画アルゴリズムを理解していないと、途端にメンテナンス不能なスパゲッティコードを生み出す原因になります。今日は、中級エンジニアの皆さんが明日から自信を持ってテーブルを組めるよう、`rowspan`の「裏側の挙動」と「現場で愛される綺麗な書き方」について深掘りしていきましょう。

—

1. rowspanの基本：ブラウザはどう解釈しているのか？

`rowspan=”n”` を指定すると、そのセルは現在の行を含めて垂直方向に計`n`行分を占有します。ここで最も重要なのは、「結合した分、後続の行ではその列のセル定義を削らなければならない」という大原則です。

ブラウザのレンダリングエンジンは、テーブルを「グリッド」として捉えています。`rowspan`が指定された瞬間、ブラウザは「次の行の、この列の位置には、上の行から伸びてきたセルが既に存在している」と認識します。もし、その位置にわざわざ新しい`

`と`

`を分けることで、ブラウザがテーブルの構造をより正確に解釈しやすくなります。

行の引き算: 2行目の`

`内には、本来あるはずの「日付」のセルを記述していません。これが`rowspan`実装における唯一かつ最大の注意点です。

—

3. シニアからのアドバイス：メンテナンス性を高めるために

`rowspan`を多用するデザインは、アクセシビリティの観点から見ても、またレスポンシブ対応の観点から見ても「鬼門」になりがちです。実務において以下のルールを意識するだけで、チームの生産性は劇的に向上します。

① CSSでの装飾を前提にする

`rowspan`したセルに対して、`vertical-align: middle;` を当てるのは基本中の基本です。また、結合したセルと他のセルで背景色を変えるような場合、`tr:nth-child`セレクタを安易に使うと、結合の影響でスタイルが期待通りに当たらないことがあります。クラス名を適切に付与し、依存関係を断ち切る設計を心がけましょう。

② スマホ対応を考える（ここが最重要）

テーブルはスマホとの相性が最悪です。`rowspan`を多用したテーブルをスマホで表示すると、横幅が足りず、ユーザーは迷子になります。

• 推奨: `rowspan`を使うような複雑なテーブルは、スマホ表示時には`display: block;`でリスト形式に変換する、あるいは`overflow-x: auto;`のコンテナで囲むのが定石です。

③ 「本当に必要か？」を問う

デザイナーから渡されたFigmaのデザインが、過度に複雑な結合を求めている場合、一度立ち止まってください。「これ、`rowspan`を使わずに、CSS GridやFlexboxで擬似的なテーブルを作った方が保守性が高くないか？」と提案できるのが、シニアなエンジニアの役割です。

—

まとめ

`rowspan`は強力な武器ですが、同時に諸刃の剣でもあります。「次の行からセルを消す」という基本さえ押さえていれば怖くはありません。しかし、それ以上に「このテーブルは後から誰かが編集するのか？」「スマホでどう崩れるのか？」という視点を持ってマークアップに向き合ってください。

綺麗なコードは、書いた瞬間の美しさだけでなく、数ヶ月後に見返したときに「あ、ここは意図的にこう書いたんだな」と伝わる納得感の中に宿ります。皆さんの実装が、明日もバグ知らずでありますように！

`を追加してしまうと、グリッドが強制的に右へ押し出され、レイアウトが崩壊するというわけです。 現場の教訓： `rowspan`を使うときは、エディタ上で「仮想的なグリッド」を頭の中に描き、削るべきセルを正確に把握する癖をつけましょう。 — 2. 実践：綺麗なマークアップのサンプルコード 例えば、「2日間にわたるイベントスケジュール」を表示するテーブルを考えてみます。1日目の枠を2行分確保し、2日目は通常のテーブル構造にするケースです。 日付 時間 イベント名 10月1日 10:00 オープニングセレモニー 13:00 基調講演 10月2日 11:00 ワークショップ このコードのポイント 構造の明示: `