表−２

表つくりのつづきなり。
では、 ２つ以上のセルにまたがるセルを指定する なり。

「セル」てのは、Excelしてる人ならわかると思うけど、表のマスのことなり。

まず、横にまたがるセルの場合は、 <TD> のタグの中に、 COLSPAN="数字" といれるなり。
「数字」 のところには、いくつまたがるかの、数をいれるなり。

上の表をつくってみるなり。

<TABLE BORDER>
<TR>
<TD> １列目 </TD>
<TD> ２列目 </TD>
<TD> ３列目 </TD>
<TD> ４列目 </TD>
</TR>
<TR>
<TD COLSPAN="2"> ２つのセルにまたがるセル </TD>
<TD> ここは </TD>
<TD> ふつう </TD>
</TR>
<TR>
<TD> すきなとこでセルを合体できる </TD>
<TD COLSPAN="3"> ３つにまたがる </TD>
</TR>
<TR>
<TD COLSPAN="4"> 全部またがちゃったよ </TD>
</TR>
</TABLE>


前回も説明したけど、各行それぞれ、列の数（セルの数）だけ <TD>〜</TD> があるなり。
てことは、 <TD COLSPAN="2"> で、２つのセルをくっつけると、それが１セル分になるから、 その行の <TD>〜</TD> の数は、ひとつ減るなり。

上の表でいうと、１行めは、ふつうにセルが４個なので、 <TD>〜</TD> は、４組。
２行めは、２つを１つに合体してるから、「２−１＝１」で、合計で１つ減って、 <TD>〜</TD> の数は、３組になるなり。

同じようにして、３つを１つに合体すると、合計で２つ減るし、
４つを１つにすると、合計で３つ減ることになるなり。

文章で説明するとややこしいけど、簡単なことなり。
紙にペンでどんなレイアウトの表をつくるか書いてみれば、わかるなり。
わかりにくかったら、ごめんなりねー。

では、今度は、縦にまたがるセルを指定するなり。
縦にまたがるセルの場合は、 <TD> のタグの中に、 ROWSPAN="数字" といれるなり。
「数字」 のところには、いくつまたがるかの、数をいれるなり。

今度は縦なんで、ちょっと、 <TD>〜</TD> の数がややこしいなり。
でも、上の表を見ながらすると、簡単なりね。

まず、１行目は、普通に４つなり。
四角い表で、２行めからはじまるなんてことは、ありえないんで、
あたりまえなりねー。

２行めは、２列めと４列めが、すでに１行めで指定されてるんで、
１列めと３列めの内容を書くなり。
つまり、 <TD>〜</TD> は、２組なり。

３列めは１組、４列めは３組になるなり。

では、 上の表をつくってみるなり。


<TABLE BORDER>
<TR>
<TD> １行め </TD>
<TD ROWSPAN="3"> 縦に３つつながる </TD>
<TD> ふふふ </TD>
<TD ROWSPAN="4"> 一気に４つつなげよう </TD>
</TR>
<TR>
<TD> ２行め </TD>
<TD ROWSPAN="2"> ここは２つ合体 </TD>
</TR>
<TR>
<TD> ３行め </TD>
</TR>
<TR>
<TD> ４行め </TD>
<TD> わかる？ </TD>
<TD> 簡単？ </TD>
</TR>
</TABLE>


できたかな？
セルの状態がわかりやすいように、枠線つきの表で説明したけど、 線なしでも、おなじなりよ。

もちろん、横につなげるのと縦につなげるのを組み合わすのも、自由なり。
例として、いりくんだ表をつくってみたんで、
表示された表をみて、おなじレイアウトでつくる練習をしてみるのも、いいなり。

「いりくんだ表」は こちら

「いりくんだ表」で使ってる画像の紹介

nijumaru.gif WIDTH="30"HEIGHT="30" ALT="◎"
yasei.gif WIDTH="60"HEIGHT="100" ALT="野生の人"
sankaku.gif WIDTH="50"HEIGHT="80" ALT="三角形"
.smile.gif WIDTH="50"HEIGHT="50" ALT="スマイル"

正解は、ブラウザで「ページのソース」を表示すると、見れるなりよ。
「ページのソース」の表示の仕方は、 ひとまとめ の下の方に説明してあるなり。

んーじゃ、精進しなされ。
次回も、まだ、表のことなりよ〜〜。
おいてかれないようにするなりなり〜。