【第３７講】表(3)・セルの結合
（1998年11月24日更新）
【There have been visitors since 1997. 9.24.】
今まで見てきたように<TR>〜</TR>の中にある<TD>〜</TD>の数がセルの数でしたね。では、もし1行目のセルの数が4で2行目のセルの数が3だったら、どうなるのでしょう。
|
<TABLE BORDER> <TR><TD>A1</TD><TD>B1</TD><TD>C1</TD><TD>D1</TD></TR> <TR><TD>A2</TD><TD>B2</TD><TD>C2</TD></TR> </TABLE> |
（表示結果）
| A1 | B1 | C1 | D1 |
| A2 | B2 | C2 |
本来ならD2のセルが来るはずのD1の下が変ですよね。この例からも分かるように、1つの表の中では各行のセルの数が同じでないと、表示されたときにおかしくなります。でも、セルの数を不規則にして複雑な表を作る必要があることも予想されます。そういう時のために、セルの結合について見ておくことにしましょう。
【テーブルのセルの結合】
<TD COLSPAN=cols>〜</TD>
<TD ROWSPAN=rows>〜</TD>
※cols/rows＝{number}
COLSPAN属性を使うと、横（行）方向に連続したcols個のセルを1つのセルに、ROWSPAN属性を使うと、縦（列）方向に連続したrows個のセルを1つのセルにひとまとめにすることができます。ただ、そうするとこのセルだけ横幅、縦幅が大きくなるので、第35講で取り上げたALIGN属性やVALIGN属性で、文字の配置位置を一緒に指定しておくとよいでしょう。
|
<TABLE BORDER> <TR><TD>A1</TD><TD>B1</TD><TD>C1</TD><TD>D1</TD></TR> <TR><TD COLSPAN=2 ALIGN=center>A2+B2</TD><TD>C2</TD><TD ROWSPAN=3 VALIGN=middle>D2+D3+D4</TD></TR> <TR><TD>A3</TD><TD>B3</TD><TD>C3</TD></TR> <TR><TD COLSPAN=3 ALIGN=center>A4+B4+C4</TD></TR> </TABLE> |
（表示結果）
| A1 | B1 | C1 | D1 |
| A2+B2 | C2 | D2+D3+D4 | |
| A3 | B3 | C3 | |
| A4+B4+C4 | |||
セルの中が空白のときは表示されたときに不自然です。上のように指定すると自然な感じになります。
|
<TABLE BORDER> <TR><TH>空白の指定</TH><TH>空白の表示</TH></TR> <TR><TH>指定なし→</TH><TD></TD></TR> <TR><TH>指定あり→</TH><TD> </TD></TR> </TABLE> |
（表示結果）
| 空白の指定 | 空白の表示 |
| 指定なし→ | |
| 指定あり→ |
 【第３８講】表(4)・応用編 |
 【第３７講】に関する質問フォーム |
 【第３６講】表(2)・枠の幅とサイズ |
