５－１：セルを結合しよう！　～TABLEおまけ

　今回は見て下さった方からのリクエストです。TABLEタグの中でもややこしいbut使いこなせればなかなか面白い「セルの結合」の方法を紹介します。
「セルの結合ってなに？」と思う方も多いと思うので，まずはサンプルを・・・。

<TABLE BORDER=1>	
	<TR>
	<TH>　</TH><TH COLSPAN=4>テストの成績</TH>
	</TR>
	<TR>
	<TD ROWSPAN=3>全教科100点満点</TD><TH COLSPAN=2>国語</TH><TH COLSPAN=2>数学</TH>
	</TR>
	<TR>
	<TH>中間</TH><TH>期末</TH><TH>中間</TH><TH>期末</TH>
	</TR>
	<TR>
	<TD>89</TD><TD>94</TD><TD>100</TD><TD>32</TD>
	</TR>
</TABLE>

	テストの成績
全教科100点満点	国語		数学
	中間	期末	中間	期末
	89	94	100	32

　「全教科100点満点」が3行分の高さを使い，「テストの成績」が4列分の幅，「国語」・「数学」が2列分の幅を使っています。今までさんざんTABLEの使い方についてはやってきたので，人によっては何がキーワードかすぐに分かったでしょう。ROWSPANとCOLSPAN，この２つの属性がポイントです。

<TH>～</TH>　<TD>～</TD>

属性	入る値のタイプ	説明
ROWSPAN	数字	そのセルを縦何行分使うかを指定します。
COLSPAN	数字	そのセルを横何列分使うかを指定します。

　ROWSPANとCOLSPANの難しい所は，セルの個数を正しく記述するのが大変になることです。ページビルダーなどでグラフィカルに作れれば良いのですが，HTMLでつくっていくとだんだん表をどこまで作ったかわからなくなってしまいます。そこで，ROWSPANとCOLSPANを使った表の作り方をゆっくりみていきましょう。
（ここでは分かりやすいように，サンプルにおいて完成したセルはBGCOLORで青く塗っています。実際は青くはならないので注意して下さい。）

　まず，普通に一行作ってみましょう。

<TABLE BORDER=1>	
	<TR>
	<TD>1-1</TD><TD>2-1</TD><TD>3-1</TD><TD>4-1</TD>
	</TR>
</TABLE>

1-1

2-1

3-1

4-1

　次の行の1-2をROWSPAN=3にしてみます。

<TABLE BORDER=1>	
	<TR>
	<TD>1-1</TD><TD>2-1</TD><TD>3-1</TD><TD>4-1</TD>
	</TR>
	<TR>
	<TD ROWSPAN=3>1-2</TD><TD>2-2</TD><TD>3-2</TD><TD>4-2</TD>
	</TR>
</TABLE>

1-1	2-1	3-1	4-1
1-2	2-2	3-2	4-2

　見た目何も変わっていませんね。下にもうセルがなく縦に伸ばしようがないので，普通に表示されてしまっています。
　では，普通に一行追加してみましょう。

<TABLE BORDER=1>	
	<TR>
	<TD>1-1</TD><TD>2-1</TD><TD>3-1</TD><TD>4-1</TD>
	</TR>
	<TR>
	<TD ROWSPAN=3>1-2</TD><TD>2-2</TD><TD>3-2</TD><TD>4-2</TD>
	</TR>
	<TR>
	<TD>1-3</TD><TD>2-3</TD><TD>3-3</TD><TD>4-3</TD>
	</TR>
</TABLE>

1-1	2-1	3-1	4-1
1-2	2-2	3-2	4-2
	1-3	2-3	3-3	4-3

　見てわかるとおり，３行目が一マスずつ右にずれています。つまり，1-2の縦の長さを３にした時点で1-3,1-4が来るべき所はもう占領されてしまっているのです。（この表では４行目が作られていないので1-4は消えてしまっていますが・・・。）
　1-2まで書いた時点で占領されているセルは以下の青い所です。

1-1	2-1	3-1	4-1
1-2

　次は，横方向の結合COLSPANのサンプルです。まずは単なる4x3の表です。

<TABLE BORDER=1>	
	<TR>
	<TD>1-1</TD><TD>2-1</TD><TD>3-1</TD><TD>4-1</TD>
	</TR>
	<TR>
	<TD>1-2</TD><TD>2-2</TD><TD>3-2</TD><TD>4-2</TD>
	</TR>
	<TR>
	<TD>1-3</TD><TD>2-3</TD><TD>3-3</TD><TD>4-3</TD>
	</TR>
</TABLE>

1-1	2-1	3-1	4-1
1-2	2-2	3-2	4-2
1-3	2-3	3-3	4-3

　1-2のCOLSPANを３にしてみます。

<TABLE BORDER=1>	
	<TR>
	<TD>1-1</TD><TD>2-1</TD><TD>3-1</TD><TD>4-1</TD>
	</TR>
	<TR>
	<TD COLSPAN=3>1-2</TD><TD>2-2</TD><TD>3-2</TD><TD>4-2</TD>
	</TR>
	<TR>
	<TD>1-3</TD><TD>2-3</TD><TD>3-3</TD><TD>4-3</TD>
	</TR>
</TABLE>

1-1	2-1	3-1	4-1
1-2			2-2	3-2	4-2
1-3	2-3	3-3	4-3

　わかりましたか？COLSPAN=3とした時点でもう1-2,2-2,3-2と横３列は占領されてしまっているのです。つまり，2の行の残りは4-2の１つだけなのです。

<TABLE BORDER=1>	
	<TR>
	<TD>1-1</TD><TD>2-1</TD><TD>3-1</TD><TD>4-1</TD>
	</TR>
	<TR>
	<TD COLSPAN=3>1-2</TD><TD>4-2</TD>
	</TR>
	<TR>
	<TD>1-3</TD><TD>2-3</TD><TD>3-3</TD><TD>4-3</TD>
	</TR>
</TABLE>

1-1	2-1	3-1	4-1
1-2			4-2
1-3	2-3	3-3	4-3

　まあ，ベストな勉強法は自分で実際に組み立ててみることです。自分の思った通りに表が作れるようになるまでいろいろ試してみて下さい。コツさえつかめばとても簡単ではないかと思います。

　今回はTABLEタグのおまけということであえて章は変えていません。次回は６章で別のタグを扱いたいと思います。お楽しみに！！

＞戻る

５－１：セルを結合しよう！ ～TABLEおまけ

<TH>～</TH> <TD>～</TD>

５－１：セルを結合しよう！　～TABLEおまけ

<TH>～</TH>　<TD>～</TD>