span属性、colspan属性、rowspan属性の上限値、下限値

colgroup 要素、 col 要素で列がまたがる数を指定する span 属性、および表のセルを結合するための colspan 属性、 rowspan 属性には上限値、下限値があります。

  1. HTML仕様
  2. ブラウザの実装

HTML仕様

§

まずは仕様を確認してみます。

HTML Living Standard

§

colgroup 要素、 col 要素の span 属性はa valid non-negative integer greater than zero and less than or equal to 1000とされています。「0より大きく1000以下の有効な非負整数」、要するに 1 〜 1000 の整数ですね。

td 要素、 th 要素の colspan 属性は span 属性と同じ一方、 rowspan 属性はa valid non-negative integer less than or equal to 65534と、他とは少し違う定義です。上限値が大きいだけでなく 0 が許容されており、その際は「行グループの残りすべての行にまたがる」とされています。すなわち、

<tbody>
  <tr>
    <th rowspan="0">見出しセル</th><td>セル1</td>
  </tr>
  <tr>
    <td>セル2</td>
  </tr>
</tbody>
<tbody>
  <tr>
    <td>セル3</td>
  </tr>
</tbody>

のような表の場合、見出しセルは2列にまたがる(rowspan="2" を指定したのと同じ)ことが期待されます。これは HTML4 時代から規定されていることなのですが、残念ながら Firefox しか対応していません。

ちなみに HTML4 では同様に colspan="0" も認められており、以前の Firefox は対応していましたが、現在では仕様、実装ともに消え去りました。

HTML 5.2

§

span 属性はlimited to only non-negative numbers greater than zerocolspan 属性はa valid non-negative integer greater than zeroと書き方が少々異なりますが、意味的にはどちらも「0より大きい有効な非負整数」で、上限値の記述はありません。

rowspan 属性もa valid non-negative integerで、上限値がないこと以外は Living Standard と同様です。

ブラウザの実装

§

いくつかのパターンをテストしてみました。

2017年6月時点

§

ブラウザ <col(group)? span=1001> <td colspan=1001> <td rowspan=0>
Chrome 59 ✘ 1001列を認識 ✘ 1001列を認識 rowspan="1" と同じ
Safari 10 ✘ 1001列を認識 ✘ 1001列を認識 rowspan="1" と同じ
Firefox 54 span="1000" と同じ colspan="1" と同じ ✔ 仕様どおり
Firefox 55(β) span="1000" と同じ colspan="1000" と同じ ✔ 仕様どおり
Edge 40 span="1" と同じ colspan="1" と同じ rowspan="1" と同じ
IE 11 span="1" と同じ colspan="1" と同じ rowspan="1" と同じ

2019年11月12日追記いつの間にか Chrome は rowspan=0 に対応していました(バージョン78で確認)。 Safari 13, Edge 44 は相変わらず未対応です。

2021年3月時点

§

2021年3月18日追記現在の最新状況を下表に記します。 Safari 14 は未だ rowspan="0" 未対応です。

ブラウザ <col(group)? span=1001> <td colspan=1001> <td rowspan=0>
Chrome 89 span="1000" と同じ colspan="1000" と同じ ✔ 仕様どおり
Safari 14 span="1000" と同じ colspan="1000" と同じ rowspan="1" と同じ
Firefox 86 span="1000" と同じ colspan="1000" と同じ ✔ 仕様どおり