rowspan属性
rowspan属性は、HTMLのテーブル内の行の結合を制御します。
thタグおよびtdタグに適用されます。
受け取る値：1から始まる整数。
使用方法：任意のtdセルまたはthセルにこの属性を追加します。例えば、rowspanの値を2に設定すると、その属性を設定したセルは、テーブルの高さ方向に2行分を占有します。この時、下の行にあるセルはそのまま残るため、拡大したセルがそれらを押しのけ、テーブルが崩れてしまいます。これを防ぐためには、下の行からセルを1つ削除する必要があります。理解を深めるため、例をご覧ください。
例 . 結合のないテーブル
まず、これから作業する、結合のないテーブルを見てみましょう：
<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>
table, td, th {
border: 1px solid black;
}
:
例 . セルを2行に拡張する
では、セル1のrowspan属性を2に設定し、2行に拡張してみましょう。そのセルが下の行のセルを押しのけ、テーブルが崩れるのが確認できます：
<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>
table, td, th {
border: 1px solid black;
}
:
例 . テーブルを崩さずにセルを拡張する
前の例でテーブルが崩れる問題を修正するために、2行目からセルを1つ削除してみましょう（削除するのは必ずしもセル1の真下にあるセル4である必要はなく、どのセルでも削除可能です。ここではセル番号5を削除します）：
<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>
table, td, th {
border: 1px solid black;
}
:
例 . セルを3行に拡張する
ここでは、セルを2行ではなく3行に拡張してみましょう。そのセルのrowspanを3に設定します。この際、テーブルが崩れないように、3行目からセルを1つ削除します（セル7、8、9のいずれでも構いません）：
<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>
table, td, th {
border: 1px solid black;
}
:
例 . さらに2列に拡張する
最初のセルに加えて、セル2も2列に拡張してみましょう。そのために、セル2にcolspan属性を値2で追加します。この際、テーブルが崩れないようにセル3を削除します：
<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>
table, td, th {
border: 1px solid black;
}
:
関連項目
-
テーブルの列を結合する属性
colspan
