rowspan属性

rowspan属性は、HTMLのテーブル内の行の結合を制御します。 thタグおよびtdタグに適用されます。

受け取る値：1から始まる整数。

使用方法：任意のtdセルまたはthセルにこの属性を追加します。例えば、rowspanの値を2に設定すると、その属性を設定したセルは、テーブルの高さ方向に2行分を占有します。この時、下の行にあるセルはそのまま残るため、拡大したセルがそれらを押しのけ、テーブルが崩れてしまいます。これを防ぐためには、下の行からセルを1つ削除する必要があります。理解を深めるため、例をご覧ください。

例 . 結合のないテーブル

まず、これから作業する、結合のないテーブルを見てみましょう：

html<table>
  <tr>
    <td>cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

例 . セルを2行に拡張する

では、セル1のrowspan属性を2に設定し、2行に拡張してみましょう。そのセルが下の行のセルを押しのけ、テーブルが崩れるのが確認できます：

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell5</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

例 . テーブルを崩さずにセルを拡張する

前の例でテーブルが崩れる問題を修正するために、2行目からセルを1つ削除してみましょう（削除するのは必ずしもセル1の真下にあるセル4である必要はなく、どのセルでも削除可能です。ここではセル番号5を削除します）：

html<table>
  <tr>
    <td rowspan="2">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell8</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

例 . セルを3行に拡張する

ここでは、セルを2行ではなく3行に拡張してみましょう。そのセルのrowspanを3に設定します。この際、テーブルが崩れないように、3行目からセルを1つ削除します（セル7、8、9のいずれでも構いません）：

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td>cell2</td>
    <td>cell3</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>   

csstable, td, th {
  border: 1px solid black;
}

Результат:

例 . さらに2列に拡張する

最初のセルに加えて、セル2も2列に拡張してみましょう。そのために、セル2にcolspan属性を値2で追加します。この際、テーブルが崩れないようにセル3を削除します：

html<table>
  <tr>
    <td rowspan="3">cell1</td>
    <td colspan="2">cell2</td>
  </tr>
  <tr>
    <td>cell4</td>
    <td>cell6</td>
  </tr>
  <tr>
    <td>cell7</td>
    <td>cell9</td>
  </tr>
</table>

csstable, td, th {
  border: 1px solid black;
}

Результат:

関連項目