テーブルのセルを2つ以上結合して、ひとつのセルとして表示したい時があります。縦に結合する方法と横に結合する方法を記述します。

スポンサーリンク

縦に結合する場合は、rowspan属性

HTMLのソースファイルに th や td に rowspan="結合する数" を記述すると結合できます。
以下のサンプルでは、1列目の1行目と2行目のセルを縦に2つ結合しています。

12
3
45

<table>
<tr><td rowspan="2"> 1 </td><td> 2 </td></tr>
<tr><td> 3 </td></tr>
<tr><td> 4 </td><td> 5 </td></tr>
</table>

横に結合する場合は、colspan属性

HTMLのソースファイルに th や td に colspan="結合する数" を記述すると結合できます。
以下のサンプルでは、1行目の1列目と2列目のセルを横に2つ結合しています。

1
23
45

<table>
<tr><td colspan="2"> 1 </td></tr>
<tr><td> 2 </td><td> 3 </td></tr>
<tr><td> 4 </td><td> 5 </td></tr>
</table>

その他のサンプル

実際に使えそうなサンプルを記述します。

サンプル1

12
345
67
89

<table>
<tr><th colspan="2"> 1 </th><th> 2 </th></tr>
<tr><td rowspan="4"> 3 </td><td> 4 </td><td> 5 >/td<>/tr>
<tr><td> 6 </td><td> 7 </td></tr>
<tr><td> 8 </td><td> 9 </td></tr>
</table>

サンプル2

123
45
678
910

<table>
<tr><th rowspan="2"> 1 </th><td> 2 </td><td> 3 </td></tr>
<tr><td> 4 </td><td> 5 </td></tr>
<tr><th rowspan="2"> 6 </th><td> 7 </td><td> 8 </td></tr>
<tr><td> 9 </td><td> 10 </td></tr>
</table>

サンプル3

123
4
56
7

<table>
<tr><th rowspan="4"> 1 </th><td rowspan="2"> 2 </td><td> 3 </td></tr>
<tr><td> 4 </td></tr>
<tr><td rowspan="2"> 5 </td><td> 6 </td></tr>
<tr><td> 7 </td></tr>
</table>

サンプル4

123
456
78

<table>
<tr><th> 1 </th><td> 2 </td><td> 3 </td></tr>
<tr><th> 4 </th><td rowspan="2"> 5 </td><td> 6 </td></tr>
<tr><th> 7 </th><td> 8 </td></tr>
</table>

サンプル5

123
45
67
891011

<table>
<tr><th> 1 </th><td colspan="2" rowspan="3"> 2 </td><td> 3 </td></tr>
<tr><th> 4 </th><td> 5 </td></tr>
<tr><th> 6 </th><td> 7 </td></tr>
<tr><th> 8 </th><td> 9 </td><td> 10 </td><td> 11 </td></tr>
</table>