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

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

 

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

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

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

1-1

横に3つ結合しました

1-5

縦に2つ

結合しました

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

これは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>

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

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

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

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

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

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

 

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

@)列に分割する★

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

       
   

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

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

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

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

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

 

A)行に分割する

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

   
   
 
 

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

もともとこの表は以下のようなスクリプトだったわけですが、

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

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

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


HP作成ソフトでの指定手順 (Front Pageの場合)

セルを結合するには、作成画面上で結合したいセルの始めから終わりまでマウスをドラッグして選択し、右クリックして「セルの結合」をクリックして下さい。

また、一つのセルを分割したい場合は目的のセルにカーソルを置いて右クリックし、「セルの分割」をクリックすると、列を増やすのか、行を増やすのか尋ねて来ます。どちらかにクリックしてマークを入れ、必要な数を入力して下さい。

 

初級篇1.VOL3.テーブルの基本・その6 <<

 

2006.5.14+6.11+6.25+7.2改稿