サルでもわかる？かんたんHTML トップページ
>>> ＃６．表
>>> セルを結合しよう
「さて、今回はセルを結合するためのタグじゃ。
ちょっとややこしいかもしれんが、がんばって覚えてくれぃ。」
セルを結合するタグ
-----------------------------------------------------------------
colspan="■" ： ■個のセルを横につなげる。
rowspan="●" ： ●個のセルを縦につなげる。
（■、●には数字を入れる）
-----------------------------------------------------------------
「おお！これは便利ですね♪どうやって使うんですか？」
「これは <TD> の中にいれて使うんじゃ。
■と●には、つなげたいセルの数を入力するぞぃ。」
「ってことは、えっと・・・
上の表は横に3つつながってるから colspan="3"
下の表は縦に2つつながってるから rowspan="2"
ってことですね。」
「うむ、そのとおりじゃ。
ただ、セルをつなげてしまうと、入力する <TD>〜</TD> の数が
ややこしくなってくるんじゃ。
ブラウザで見る前にちょっと説明しておくぞぃ。
まず、上の表、もともとはセルが9個あったんじゃ。」
「こんなふうじゃな。
この表にタグを当てはめてみるぞぃ。」
<TABLE border>
</TABLE>
「こんなふうになるんじゃ。わかるかのぅ？
そして、一番上の列のセルを3つつなげると・・・。」
<TABLE border>
</TABLE>
「こうなるぞぃ。つまり
<TD colspan="3">〜</TD> ＝ <TD></TD><TD></TD><TD></TD>
になるんじゃよ。」
「ふむふむ。なるほどぉ。
ここまではなんとかわかりました！
次にたてにつなげる場合はどうなるんですか？」
「うむ。まずさっきと同じように、セルが9個の表があるな。
またタグを当てはめてみるぞぃ。」
<TABLE border>
</TABLE>
「今度は黄色くなっているセルを縦に2つつなげるぞぃ。
すると・・・。」
<TABLE border>
</TABLE>
「ちょっとややこしいが・・・。
1列目の最初の <TD> が <TD rowspan="2"> に変わって
2列目の最初の <TD>〜</TD> がなくなっておるのがわかるじゃろぅ？
つまり1列目の <TD rowspan="2">〜</TD> は
1列目と2列目の最初の <TD>〜</TD> をくっつけたもの、
ということなんじゃ。」
「う〜ん、ややこしいなぁ。
わかったような、わかんないような・・・。
じゃあ、この縦につながったセルに文字を入力したいときは？」
「うむ、その場合は1列目の
<TD rowspan="2">〜</TD> の間に入力するんじゃよ。
これは自分で表を作ってみて、慣れるしかないかのぅ。
では実際に使ってみるぞぃ。」
「ではブラウザで見てみるぞぃ。」
「どうじゃ？今回はちょっとややこしかったのぅ。
慣れるまで何度も使って、ぜひ使いこなせるようになってくれぃ☆
今回はこれでおしまいじゃ。おつかれさんじゃったな。」
↑ページのTOPへ
サルでもわかる？かんたんHTML トップページ >>> ＃６．表 >>> セルを結合しよう
「さて、今回はセルを結合するためのタグじゃ。ちょっとややこしいかもしれんが、がんばって覚えてくれぃ。」
| サンプル | ||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||
「こんなタグを使うぞぃ。」
セルを結合するタグ
-----------------------------------------------------------------
colspan="■" ： ■個のセルを横につなげる。
rowspan="●" ： ●個のセルを縦につなげる。
（■、●には数字を入れる）
-----------------------------------------------------------------
「おお！これは便利ですね♪どうやって使うんですか？」
「これは <TD> の中にいれて使うんじゃ。■と●には、つなげたいセルの数を入力するぞぃ。」
「ってことは、えっと・・・上の表は横に3つつながってるから colspan="3"
下の表は縦に2つつながってるから rowspan="2"
ってことですね。」
「うむ、そのとおりじゃ。ただ、セルをつなげてしまうと、入力する <TD>〜</TD> の数が
ややこしくなってくるんじゃ。
ブラウザで見る前にちょっと説明しておくぞぃ。
まず、上の表、もともとはセルが9個あったんじゃ。」
「こんなふうじゃな。この表にタグを当てはめてみるぞぃ。」
<TABLE border>
| <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>
「こんなふうになるんじゃ。わかるかのぅ？そして、一番上の列のセルを3つつなげると・・・。」
<TABLE border>
| <TR><TD colspan="3"></TD></TR> | ||
| <TR><TD></TD> | <TD></TD> | <TD></TD></TR> |
| <TR><TD></TD> | <TD></TD> | <TD></TD></TR> |
</TABLE>
「こうなるぞぃ。つまり<TD colspan="3">〜</TD> ＝ <TD></TD><TD></TD><TD></TD>
になるんじゃよ。」
「ふむふむ。なるほどぉ。ここまではなんとかわかりました！
次にたてにつなげる場合はどうなるんですか？」
「うむ。まずさっきと同じように、セルが9個の表があるな。またタグを当てはめてみるぞぃ。」
<TABLE border>
| <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>
「今度は黄色くなっているセルを縦に2つつなげるぞぃ。すると・・・。」
<TABLE border>
| <TR> <TD rowspan="2"> </TD> - - - - - - - - - <TR> | <TD></TD> | <TD></TD></TR> |
| <TD></TD> | <TD></TD></TR> | |
| <TR><TD></TD> | <TD></TD> | <TD></TD></TR> |
</TABLE>
「ちょっとややこしいが・・・。1列目の最初の <TD> が <TD rowspan="2"> に変わって
2列目の最初の <TD>〜</TD> がなくなっておるのがわかるじゃろぅ？
つまり1列目の <TD rowspan="2">〜</TD> は
1列目と2列目の最初の <TD>〜</TD> をくっつけたもの、
ということなんじゃ。」
「う〜ん、ややこしいなぁ。わかったような、わかんないような・・・。
じゃあ、この縦につながったセルに文字を入力したいときは？」
「うむ、その場合は1列目の<TD rowspan="2">〜</TD> の間に入力するんじゃよ。
これは自分で表を作ってみて、慣れるしかないかのぅ。
では実際に使ってみるぞぃ。」
| メモ帳 |
|
<BODY>〜</BODY> の間に入力
<TABLE border> <TR> <TD colspan="3">パンダ先生オススメ映画</TD> </TR> <TR> <TD>パンダの逆襲</TD> <TD>パンダ de パンダ</TD> <TD>世界の中心でパンダが叫ぶ</TD> </TR> </TABLE> <TABLE border> <TR> <TD rowspan="3">2006年映画ランキング</TD> <TD>1位</TD> <TD>パンダーツ・オブ・カリビアン</TD> </TR> <TR> <TD>2位</TD> <TD>パンダーマンリターンズ</TD> </TR> <TR> <TD>3位</TD> <TD>ハリーポッターと炎のパンダ</TD> </TR> </TABLE> |
「ではブラウザで見てみるぞぃ。」| ブラウザ | |||||||||||||
↑ 一番上のセルが横に3つつながっておるな。
↑ 左側のセルが縦に3つつながっておる。 |
|||||||||||||
「どうじゃ？今回はちょっとややこしかったのぅ。慣れるまで何度も使って、ぜひ使いこなせるようになってくれぃ☆
今回はこれでおしまいじゃ。おつかれさんじゃったな。」
↑ページのTOPへ
|
表の背景に画像を使おう <<< 前のページへ戻る |
箇条書きのリストを作ろう 次のページへ進む >>> |
サルでもわかる？かんたんHTML トップページ >>> ＃６．表 >>> セルを結合しよう
