エクセルでいうセルの結合は、HTMLの<table>で表現できないときがある

HTMLのtableタグでどんな表組でも作成できると思っていた。
セルを縦または横に繋いだ形(エクセルでいうセルの結合)でも、rowspan、colspanを使ってこれまで特に問題に感じたことはなかった。

今回、どうしてもHTMLでうまく作れない表というかセル結合の組み合わせに出会い、調べて行くとどうもtableタグの仕様限界というか仕様未定義という結論に至った。(ChatGPTの助けを得た上での推測)

まず、作成できなかった表はExcelでは下記のようなもの。

rowspanを3つ使えばできると思いませんか?
私は何の問題もないと思いコーディングに立ち向かいました。

書いたHTMLは下記。

  <table>
    <caption>tableでの表現ができない</caption>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
    <tr>
      <td>あ</td>
      <td>い</td>
      <td rowspan="2">う</td>
    </tr>
    <tr>
      <td rowspan="2">え</td>
      <td rowspan="2">お</td>
    </tr>
    <tr>
      <td>か</td>
    </tr>
  </table>

HTML記述としての間違いをチェックしつつ、なかなかうまくできない。
ブラウザ表示はどうしてもフラットなセル結合がない表示なってしまう。

ブラウザ表示は下記になってしまう。

崩れるというよりもrowspanが一切効いておらず、最初は意味がわからなかった。

シンプルな表は問題ないし、結合が複数あるから必ず問題というわけではない。大丈夫な表が大半だ。

HTMLで作成できない条件は 「ある行において、全ての列がrowspan対象である」場合ダメなのではないかと思う。
できない例の3行目「え」から始まる行が怪しい。

全部の列がrowspanなのだ。

試行錯誤していく中でもう一つの事象が、ブラウザ依存になるパターンもあったこと。
先程の例は、Edge、Chrome、Firefox、Safariで全て同じ結果(=NG)だった。

次のパターンはFirefoxは期待通り、他のブラウザではNGという状況だった。

「ある行において、全ての列がrowspan対象である」条件に当てはまっているものの、Firefoxではこちらの意図を組んでくれたのでは無いかと思う。よきに計らってもらったというか、仕様的にDon’t Careだからどのように解釈しても良いでしょ? というところか。このときのHTMLは下記の通り。これも構造的には期待通り動いて欲しい・動くものだと思って書いた。

  <table>
    <caption>tableでの表現ができない(firefoxのみそれなりに見える)</caption>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
    </tr>
    <tr>
      <td rowspan="2">あ</td>
      <td rowspan="2">い</td>
      <td>う</td>
    </tr>
    <tr>
      <td rowspan="2">え</td>
    </tr>
    <tr>
      <td rowspan="2">お</td>
      <td rowspan="2">か</td>
    </tr>
    <tr>
      <td>き</td>
    </tr>
  </table>

最後にまとめの図。

ちなみに、解決のために tableタグをあきらめて、Css Grid Layoutへ切り替えた。