モックン☆彡の部屋

さて、 テーブル タグもいよいよ大詰めを迎えました。

このタグに力を入れて書いているのは、 前回 書いた 《例題４》 のように

使い方によって色々できるからです。

今回は今まで テーブル を書くと格子状になるだけで

面白みが無いので、左右上下の セル を結合させる方法を解説します。

セル とは、 テーブル を作った時の細かい部屋状の枠を表し、

この セル が集まって テーブル が構成されます。


《例題１》

Ａ～Ｐまで１つ１つの全てが セル です。

これから 《例題１》 の テーブル をいじって セル をくっつける（合成）のですが、

この テーブル が

何行何列

かをしっかり把握しなければなりません。

ちなみに 《例題１》 は < TR > が４つ、 < TR > に対して

次にこの テーブル をどの様にするか

イメージ

するのです。

では、実際に説明します。

セル を横につなげるには『 colspan="" 』、

セル を縦につなげるには『 rowspan="" 』を使います。

『 "" 』の中には数値が入り、 セル が何個分かを表します。


《例題２》

まず、 《例題２》 の表を作るのにあたって、結果の表を イメージ します。

そして 最小単位 の セル が縦横にいくつあるか考える。

すると、

４行４列

と分かりますね。

そして、実際にタグを書くときは < TR > に注目して書きます。

理由は、 《例題２》 でも分かるとおり < TD > タグでは書く個数が１～３個に対して、

< TR > タグは個数が変わっていないでしょ。

では、 < TR > タグに注目して 《例題２》 を説明します。



セル Ａ は横に３つ分の セル スペースを持つので、

『 colspan="3" 』と書きます。後は < TH > または < TD > タグが

合計で４つになるようにするので、 < TH > タグを１つ（ セル Ｂ）書いています。



セル Ｃ は縦に３つ分の セル スペースを持つので、

『 rowspan="3" 』と書きます。

続いて セル Ｄ は横に２つ分、縦に２つ分の セル スペースを持つので、

『 colspan="2" rowspan="2" 』と書きます。

後は < TH > または < TD > タグが

合計で４つになるようにするので、 セル Ｃ で１つ、 セル Ｄ で２つ使っているので

< TD > タグを１つ（ セル Ｅ）書いています。



既に セル Ｃ で１つ、 セル Ｄ で２つの合計３つ横の セル スペースを使われています。

よって、 < TH > または < TD > タグが合計で４つになるようにするので、

< TD > タグを１つ（ セル Ｆ）書いています。



ここでも セル Ｃ で１つ横の セル スペースを使われています。

後は < TH > または < TD > タグが 合計で４つになるようにするので、

< TD > タグを３つ（ セル Ｇ・Ｈ・Ｉ）書いています。

---

４ページに渡り テーブル タグについて書いてきましたが、

この他に セル のグループ化や、テキストの回り込み、またその解除方法、

セル を区切る線の表示形式の指定などありますが、

スタイルシートを伴うのを考慮したものや、

Internet Explorer

ではサポートしているが、

タグをコピーして使う場合は、全角のスペースは半角にするか、削除して下さい

テーブルで整頓３（高）へ

テーブルで整頓５（高）へ