【HTML】colspan属性でテーブルのセルを横に統合する

このページについて

このページではHTMLで使うことができるcolspan属性についての解説をしています。

colspan属性はtableタグのtdタグとthタグで使える属性となります。こちらはセルを横方向に統合する機能を持っています。対となる縦方向への統合はrowspan属性を参照してください。

colspan属性はtdタグとthタグに付与し、統合したいセルの数を記入するだけでOKです。その際、他のセルとの数を一致させておいた方が見た目や表示など、いろんな意味で安定します。

<table>
<tr><td colspan="2">2セル統合</td></tr>
<tr><td>1</td><td>2</td></tr>
</table>

このように使用します。上のセルを横に2つ統合しましたが、その下では個別のセルを2つ用意しています。これの数が不一致だと一部が長く一部が極端に短いなどの表示になったりするので、なるべく全体的な数は揃えておいた方がいいと思います。

上のソースコードを実行すると以下のようになります。

2セル統合
1	2

これは数を揃えたので問題なく表示されていますが、仮に数が異なるテーブルを作成した場合にどのように見えるか実験してみます。

このように、セルの数が一致していない場合は何も表示されないエリアとなります。これ自体は不具合とかそう言うわけではないのであっても問題はありませんが、ブラウザによっては見た目が想定と異なる場合もあったりするかもしれません。そこだけ注意しておきましょう。