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 と同様です。
ブラウザの実装
いくつかのパターンをテストしてみました。
- span属性、colspan属性、rowspan属性の上限値、下限値テスト(
codepen.io
)
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" と同じ |
✔ 仕様どおり |