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

公開日:

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

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

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

ブラウザの実装

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

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