５ |
表でもう少し凝ったレイアウトをしてみよう！ |
４． |
セルを結合して幅を指定したい！ |
| NE3 | NE4 | NE6 | IE3 | IE4 | IE5 | IE6 | i |
今までやった表を使うとどうしても縦横に箱が同じ数ずつ並んでしまっていたね。
でも、次のようにしたい場合はどうすればいいのだろうか？
このように横幅を１つのセルがまたがって表示されるんだ。
この方法をやってみよう！
|
||
|
■：１つのセルがまたがる数 |
■には結合したいセルの数、つまり１つのセルがまたがる数を指定してね。
これを見て気付くかな？<TD>というのは何だった？そうだね、セルを作るときに<TD>というのを使ったね。
つまりここのタグで大事なところはCOLSPANだね。
COLSPANでそのセルの形を決めている（つまり、いくつのセルを結合するか）ということになるんだね。
じゃあ、セルを結合させてさらに中を太字にしたい時はどうすればいいのかな。
それはさっきやった太字にする<TH>を使うんだね。 ←このページの標準編２
<TD>のところを<TH>に変えてやればいいね。
（<TH COLSPAN="■">〜</TH>）
| SOURCE |
| <HTML> <HEAD> <TITLE>テーブル</TITLE> </HEAD> <BODY> <TABLE BORDER>
</BODY> |
| RESULT | |||||||||
|
|||||||||
次に縦のセルを結合する方法をやってみよう。
これは少し難しいかもしれないのでよく読んでね。
まずはタグからだね。
|
||
|
■：１つのセルがまたがる数 |
これはさっきの横のセルを結合するタグのCOLSPANがROWSPANに変わっただけだよね。
だから、<TD>を<TH>に変えてやると当然中は太字で表わされるからね。
・<TH ROWSPAN="■">〜</TH>
でも少し違ってくるのがＨＴＭＬ文での書き方なんだ。
| SOURCE |
| <HTML> <HEAD> <TITLE>テーブル</TITLE> </HEAD> <BODY> <TABLE BORDER>
</BODY> |
| RESULT | |||||||
|
ここで説明が必要だね。
ソース文（青いところに書いてある文）をみてね。
一番左の３つにまたがってる部分（<TD ROWSPAN="3">〜</TD>）は始めの部分に入れてしまうんだ。
だから、始めの一行目で左から全て書いてしまうんだね。
そして２行目からは残った部分のセルを順番に書いていくということなんだ。
| セルは縦３つにまたがる | あ | あ |
| い | い | |
| う | う |
つまり、はじめに緑の部分を指定しているんだね。
（<TR><TD
ROWSPAN="3">セルは縦３つにまたがる</TD><TD>あ</TD><TD>あ</TD></TR>のところ）
後の残りは今までと同じように（今の場合、残りは白いところの２行２列）を作っていくんだね。
表に題名をつけよう！
セル中のテキストの位置を指定しよう！