テーブルのセルの結合

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

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

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

1	2
1	3
4	5


<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
2	3
4	5


<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

1		2
3	4	5
	6	7
	8	9


<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

1	2	3
1	4	5
6	7	8
6	9	10


<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

1	2	3
	2	4
	5	6
	5	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

1	2	3
4	5	6
7	5	8


<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

1	2		3
4			5
6			7
8	9	10	11


<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>