Tweet

Pocket

テーブルのセルは通常格子状に並んでいます。しかし同じ内容が入っているセルはまとめて結合すると、Excelで作った表のようになって見やすくなります。セルを縦に結合するにはrowspan属性を、横に結合するにはcolspan属性を指定します。ここではcolspan属性を説明します。

セルを横に結合するには

テーブルは隣り合うセルを結合して、1つのセルにすることができます。セルを連結するとも言います。

横方向に隣り合うセルの内容が同じであれば、結合の一番左になるセルのtd要素またはth要素にcolspan属性を指定します。
たとえば、<td colspan=”2″>…</th>という形です。

結合するセルの数を指定する

colspan属性では結合したいセルの数を数値で指定します。上の例では”2″になっていますが、任意の数のセルを結合することができます。ただし指定できるのは”2″以上の数字のみです。
縦にセルを結合するrowspan属性では数値に”0″を指定できますが、colspan属性では”0″を指定することはできません。

結合されたセルはどうなる？

colspan属性を指定すると、指定したセルから右方向に、指定した数だけのセルが結合されます。
結合されるセルは削除されるので、記述する必要はありません。

セル結合の注意点

横方向のセル結合は任意の数を指定できますが、結合されるセルの数だけ、タグの数が減ることに注意します。
ソースを記述するときには、タグを入れる場所や消えるセルの記述に注意してください。

セル結合の問題点

以前は大きな表をレイアウト指定代わりに使っていましたが、現在はレイアウトの指定は主にスタイルシートで行います。また、方向に関わらず、セルの結合を利用すると、セル内のデータを利用しにくくなります。列のグループ化を利用した方がデータを活用できるでしょう。

縦方向にもセルを結合するには

セルは横方法にも結合することができます。
そして、セルは縦方向の結合と横方法の結合を同時に指定することもできます。
この場合はよりソースが複雑になるので、ソースを記述するときにはセルの位置をよく確認しましょう。

HTML上の表示

実行結果

投稿者：プロナビ編集部

• 
• tweet
•