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

テーブル(表)を作る時に利用する<TABLE>内の<TH>タグ、または<TD>タグにrowspan属性を指定すると、そのセルから指定された数だけ下方向のセルが連結し、一つのセルとしてまとめる事ができます。(縦方向のセルが連結する)

またrowspan属性が指定されたセルは、指定された個数分のセルの領域を一つのセルで表示することになります。 ですので、連結された側のセル(本来その領域内にあるはずのセル)は、htmlソースから削除する必要があります。

※言葉だけではわかりずらいですので、下記のサンプルソースでは削除した部分がわかるように、本来セルがあった場所にコメントを記述しておきます。

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

使用した時の例

<table border="2">
  <tr>
     <th>名前</th>
     <th>説明</th>
     <th>価格</th>
  </tr>
  <tr>
     <td>ヨーロッパブドウ</td>
     <td>中東が原産でヨーロッパに自生する唯一のブドウ</td>
     <td rowspan="2">10,000円</td>
  </tr>
  <tr>
     <td>アメリカブドウ</td>
     <td>耐病性がある北アメリカ原産のブドウ</td>
     <!--10,000円の部分(td)と連結-->
  </tr>
</table>

ブラウザ上の表示例

名前 説明 価格
ヨーロッパブドウ 中東が原産でヨーロッパに自生する唯一のブドウ 10,000円
アメリカブドウ 耐病性がある北アメリカ原産のブドウ

属性

rowspan="連結数" 指定した数値の分だけテーブル内のセルを連結する(縦方向)

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

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

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

HTML4.0とHTML4.01では、rowspan属性の値に「0」を指定した場合、表示方法が異なります。(正確には仕様が異なる)

例えばHTML4.0でrowspanの値を0にすると、指定されたセル以降のすべてのセルが結合される仕様になっています。 ですがHTML4.01の場合は結合される範囲がセルのグループ(theadtbodytfootcolgroup)内のみとなっています。

ただし値として0を指定しても認識しないブラウザが多いため、0を指定するのではなく、結合したい個数を指定した方が無難です。