ホームページ作成講座セルを結合する

セルを結合する属性

セルを結合する属性は、tdタグやthタグ内に記述します。

colspan="結合数"

セルを横に結合します。値を2にすると、二つのセルを繋げて１つにします。

rowspan="結合数"

セルを縦に結合します。値を2にすると、二つのセルを繋げて１つにします。

セルを結合する場合、他の行（若しくは列）のセル数と揃えることを忘れないようにします。 例えば縦４列の表の場合、1行に入る<td></td>の数は４つと言うことになります。 しかしセルを２つ結合した場合は、<td></td>の数を３つにしなければ、他の行と幅が揃わなくなってしまいます。

ちなみに、colspanとrowspan、どっちが縦でどっちが横の結合だったか分からなくなることがあります。 それで「row＝行」という意味であることを覚えておくと良いでしょう。 trタグのrも、「table row」の頭文字で、行を表します。 rowspanは行を連結する（つまり縦連結）と私は覚えています。

セルを結合するサンプル

それでは、セルを結合するサンプルを実際に作ってみましょう。 以下のような表を作ってみることにします。

ではtemp.htmlを開いて、tableフォルダに「lesson4.html」と言うファイル名で保存して下さい。 そしてbody内に以下のように記入してみましょう。

<table border="1">
<tr>
  <td>1</td>
  <td colspan="3">2</td>
</tr>
<tr>
  <td rowspan="3">3</td>
  <td>4</td>
  <td>5</td>
  <td>6</td>
</tr>
<tr>
  <td>7</td>
  <td colspan="2" rowspan="2">8</td>
</tr>
<tr>
  <td>9</td>
</tr>
</table>

ブラウザで表示すると、下のようになります。

<tr>～</tr>に含まれるセルは４つです。セルを結合した時には、その分だけ<td></td>を減らします。 1行目では3セルを連結（2セル減少）しているので、tdタグは２つになります。

縦に連結した時は、特に注意する必要があります。 サンプルでは２行目で縦に３セル結合しています。 それで３行目、４行目の<tr>～</tr>に含まれるセル数は３つに減ります。

colsapn属性とrowspan属性を同時に記述して、縦横に連結することも可能です。 サンプルの8が入っているセルがそれに該当します。

今は表が細長くなっていると思いますが、テーブルやセルの幅はスタイルシートで指定します。 CSSを覚えると、下のようにスタイル指定することができます。

取り敢えず今はセルを連結するcolspan属性，rowspan属性の使い方を覚えることに致しましょう。