<TH colspan="">テーブル横方向のセルを連結

テーブル(表)のセルを連結するためには<TABLE>内の<TH>タグ、または<TD>タグにcolspan属性を使います。

colspan属性を利用すると、そのセルから指定した個数分だけ右方向のセルを連結し、1つのセルとして表示できるようになります。 例えば、colspan属性の値に「2」を入力した場合は、その指定したセルから右方向にある2つ目のセルまで連結されます。

またこの属性が指定されたセルは、一つのセルで、指定した数分のセルの領域を表示するすることになります。 ですので、元々その領域内にあった連結された側のセル(thまたはtd)は、HTMLソースから取り除く必要があります。

※下のサンプルソースでは、セルの結合によってどのセル(thまたはtd)を削除したのかが分かるように、本来そのタグがあった場所にコメントを記述しておきます。

なお縦方向のセルを連結したい場合はrowspan属性を利用しましょう。

使用した時の例

<table border="2">
  <tr>
     <th colspan="2">商品</th>
     <!--商品と連結(本来thがある場所)-->
     <th>価格</th>
  </tr>
  <tr>
     <td>イチゴ</td>
     <td>青森県南津軽郡藤崎町産</td>
     <td>5,000円</td>
  </tr>
  <tr>
     <td>スイカ</td>
     <td>群馬県農業総合試験場北部分場産</td>
     <td>2,000円</td>
  </tr>
</table>

ブラウザ上の表示例

商品 価格
イチゴ 青森県南津軽郡藤崎町産 5,000円
スイカ 群馬県農業総合試験場北部分場産 2,000円

属性

colspan="連結数" テーブル横方向のセルを連結する

対応ブラウザなどのデータ

形式 <TH colspan="">~</TH>
<TD colspan="">~</TD>
分類 th,td:ブロックレベル要素
対応ブラウザ Internet Explorer2~

HTML4.0と4.01での連結の違い

colspan属性の値に「0」を指定した場合、HTML4.0とHTML4.01ではセルの連結の仕様が異なります。

例えば値として「0」を指定すると、HTML4.0では指定されたセル以降のすべてのセルが結合されますが、HTML4.01では連結の範囲がセルのグループ(thead,tbody,tfoot,colgroup)内のみとなっています。 ですが0を指定しても認識しないブラウザがほとんどですので、実際に結合したいセルの数だけ指定することをオススメします。