初級篇★ページ作りの基礎知識1. HTMLを書いてみよう

VOL4.テーブルの基本 その７ ★ セルの結合と分割

既に作成した表のセルを結合させたり、分割したりして、内容に合わせた表に作り変えてゆくことが出来ます。始めから全てスクリプトで書き込んで新規に表を作成する場合も、以下のスクリプトを参考にして下さい。

�T.隣接するセルを結合する

下の表は、内容に応じて隣接するセルを結合してた例です。

これはHTMLでは以下のように書かれているわけですが、特にマーカーで色を付けた部分に注目して下さい。

<table border="2" cellpadding="0" cellspacing="0">
<tr>
<td width="120" height="80">1-1</td>
<td width="360" height="80" colspan="3">
<p align="center">横に3つ結合しました></td>
<td width="120" height="80">1-5</td>
</tr>
<tr>
<td width="120" height="160" rowspan="2">
<p align="center">縦に2つ</p>
<p align="center">結合しました</td>
<td width="120" height="80">2-2</td>
<td width="120" height="80">2-3</td>
<td width="120" height="80">2-4</td>
<td width="120" height="80">2-5</td>
</tr>
<tr>
<td width="120" height="80">3-2</td>
<td width="120" height="80">3-3</td>
<td width="120" height="80">3-4</td>
<td width="120" height="80">3-5</td>
</tr>
<tr>
<td width="120" height="80">4-1</td>
<td width="120" height="80">4-2</td>
<td width="120" height="80">4-3</td>
<td width="120" height="80">4-4</td>
<td width="120" height="80">4-5</td>
</tr>
</table>

もともとこれは、４行５列でセルが20個ある表で、全てのセルに幅120ピクセル、高さ80ピクセルを指定してあります。その１行目を横に3つ結合し、２行目から縦に2つ結合しました。いずれの場合も、スクリプトは結合するセルの先頭にそこから何列、もしくは何行結合するかを書き込みます。

まず横に結合する場合ですが、上の例では一行目の２列めから結合が始まっていますので、１番目の<tr>〜<tr>の間にある２番目の<td>タグ内にcolspan="結合するセル数"と書き加えます。このセルは横に３つのセルが結合されて出来たものですから、幅も120ピクセルx3で360ピクセルになっており、結果としてこの行はセルが2つ失われて合計3つになってしまったので、セル内容を記述する<td>〜</td>も3セットになっています。

次に縦に結合する場合ですが、この場合も結合するセルの先頭の<td>タグの中に rowspan="結合するセル数"と書き加えます。今度は縦に結合されたわけですから、高さが80ピクセルx2で160ピクセルになっていますね。ただし、縦に結合する時はその行の横方向では１セルも失われていませんので、この行を示す<tr>〜</tr>の間には、依然として<td>〜</td>が5セット存在しています。代わりに下に向かってセルが結合されてしまったのですから、その後の３行目で１セル減り、<td>〜</td>が4セットしか存在しなくなっています。４行目はそのままですので影響はありません。このように、

横方向へはcolspan="結合するセル数"

縦方向へはrowspan="結合するセル数"

と書き込むことを覚えましょう。スクリプトに直接書き込む時は、必ず前の文字から半角空けて入力して下さい。また、サイズ指定をしている時は、結合した分だけ幅もしくは高さを増やすこと、結合した数に応じて不用な<td>〜<td>を削除することを忘れないようにしましょう。

�U.ひとつのセルを分割する

�@）列に分割する★

今度は１つのセルを幾つかに分割してみましょう。まずセルを縦に分割する場合、これは横方向に列を増やすことと考えます。下の例は、もともと2行2列でセルが4個ある表で、全てのセルに幅120ピクセル、高さ90ピクセルを指定してありました。そのうち１行目の２列目にあたるセルを３列に分割しています。

<table border="2" cellpadding="0" cellspacing="0">
<tr>
<td width="120" height="90">　</td>
<td width="40" height="90">　</td>
<td width="40" height="90">　</td>
<td width="40" height="90">　</td>
</tr>
<tr>
<td width="120" height="90"></td>
<td width="120" height="90" colspan="3"></td>
</tr>
</table>

スクリプトで見ると、１番目の<tr>〜</tr>の間に<td>〜</td>が４セットあるのが分かると思います。もともとここは、

<tr>
<td width="120" height="90">　</td>
<td width="120" height="90">　</td>
</tr>

このように<td>タグが2セットだったわけですが、1番目はそのままで、２番目のセルで分割を行った結果2セット増えて合計４セットになり、更に下の３セットについては元の幅120ピクセルが３等分されて４０ピクセルになっています。

表は本来、各行各列のセル数が同じでなければならないものなのですが、先程も書きましたように横方向に列を増やしたということは、この表はセル数を合わせるために、1行目のセルが増えた時点で２行目にも4つのセルが無ければならない状態になっています。そこで２行目については、１行目で分割されたセルの真下にあるセルは、3つのセルが横方向に結合された状態であると考えてスクリプトを書き込まなければなりません。２番目の<tr>〜</tr>の間にある、２セットめの<td>タグ内にcolspan="3" と書き込まれているのはそのためです。これでセル数の帳尻が合うことになります。

�A）行に分割する

次にセルを横に分割する場合ですが、今度は行を増やすことと考えます。下の例も、もともと2行2列でセルが4個ある表で、全てのセルに幅120ピクセル、高さ90ピクセルを指定してありました。そのうち2行目の２列目にあたるセルを３行に分割しています。

上段は変更がありませんので１番目の<tr>〜</tr>はそのまま、２番目の<tr>〜</tr>で1つめのセルは、2つめが3つに分割されたことによって本来なら３行なければなりませんが、ひとつのままですから3つのセルが縦方向に結合された状態と考えてrowspan="3" を書き加えます。そして、2つめのセルの高さ90ピクセルを三等分して30ピクセルに変え、その後に２行分、つまり２セット<tr>〜</tr> を増やします。

これでひとつの表のレイアウトも自由に変えることが出来るようになりましたね。上の例では分かりやすくするため各セルにサイズを指定してありましたが、予めサイズ指定されていない場合でも、もちろん分割や結合は可能です。目的に合わせて活用して下さい。