セルを繋げる

ホームページ作り−セルを繋げる

セルを繋げる方法

表のセル（マス）を繋げる方法について説明します。 まずは下のような表を作ってみました。

セルＡ	セルＢ	セルＣ
セルＤ	セルＥ	セルＦ
セルＧ	セルＨ	セルＩ

この表のHTMLソースは次のようになっています。

<table border="2">
<tr><td>セルＡ</td><td>セルＢ</td><td>セルＣ</td></tr>
<tr><td>セルＤ</td><td>セルＥ</td><td>セルＦ</td></tr>
<tr><td>セルＧ</td><td>セルＨ</td><td>セルＩ</td></tr>
</table>

横連結

まずは横連結をしてみましょう。セルＡとセルＢを繋げてみます。 セルＡのtdタグ内にcolspan属性を加えます。これはツールボタンのテーブル のドロップダウンメニューにある横連結セルをクリックすると挿入できます（下図）。

colspanの属性値は連結するセルの数、今回は２を設定します。 そして繋がれる方のtdタグを削除します。

<table border="2">
<tr><td colspan="2">セルＡＢ</td><td>セルＣ</td></tr>
<tr><td>セルＤ</td><td>セルＥ</td><td>セルＦ</td></tr>
<tr><td>セルＧ</td><td>セルＨ</td><td>セルＩ</td></tr>
</table>

セルＡＢ		セルＣ
セルＤ	セルＥ	セルＦ
セルＧ	セルＨ	セルＩ

縦連結

縦連結も考え方は同じです。セルＣ，セルＦ，セルＩの３つを連結してみます。 セルＣのtdタグ内に、今度はrowspan属性を入力します。 これもテーブル のドロップダウンメニューから縦連結セルをクリックすると挿入できます。

今回は３つのセルを繋げるのでrowspanの属性値は３に、そして連結されるセルＦとセルＩのtdタグは削除します。

<table border="2">
<tr><td colspan="2">セルＡＢ</td><td rowspan="3">セルＣＦＩ</td></tr>
<tr><td>セルＤ</td><td>セルＥ</td></tr>
<tr><td>セルＧ</td><td>セルＨ</td></tr>
</table>

セルＡＢ		セルＣＦＩ
セルＤ	セルＥ
セルＧ	セルＨ

ページトップへ

前へ　 INDEXへ　 次へ