HTMLの解説 　なかなか理解しにくいテーブル基本編

雑記　　 　　メモ　　 　　掲示板　　 　　SCRIPT　　 　　HTML　　 　　├ 基本　　 　　├ 前準備　　 　　├ 保存　　 　　├ 確認　　 　　├ 更新　　 　　├ 装飾　　 　　├ リンク　　 　　├ テーブル　　 　　├ テーブル2　　 　　├ フレーム　　 　　└ フレーム2　　 　　CSS　　 　　├ 記述方法　　 　　├ CSSファイル　　 　　└ テキスト　　 　　リンク　　 　　メール		1.テーブルとは 直訳すると表です。直訳しなくても表です。 説明するより見てもらった方が早いですよね。 1列目1行目 2列目1行目 3列目1行目 1列目2行目 2列目2行目 3列目2行目 ちなみに横方向が「行」、縦方向が「列」なんです。 それぞれのマスのことをセルといいます。 これだとセルは6個ありますね。 ま。覚えなくても使えるけど知識ってことで知っておいてください。 これのソースはこのようになります。 <TABLE> 　　<TR> 　　　　<TD>1列目1行目</TD> 　　　　<TD>2列目1行目</TD> 　　　　<TD>3列目1行目</TD> 　　</TR> 　　<TR> 　　　　<TD>1列目2行目</TD> 　　　　<TD>2列目2行目</TD> 　　　　<TD>3列目2行目</TD> 　　</TR> </TABLE> これが基本となるテーブルの構造です。 2.タグの解説 では上で書いたタグの説明をしてみましょう。 <TABLE>〜</TABLE> 普通にテーブルの宣言と終了タグです。 いやー。これ以上の説明は難しいわ。 <TR>〜</TR> この間に挟まれたものが同じ行に入ります。 例ではこれを2組書いてあるんで２行になってますね。 <TD>〜</TD> この間に挟まれたものが列になります。 例では（1行につき）3組書いてあるんで3列になってますね。 3.色を付けよう さすがにこのままじゃ味気ないですよね。 ってことで着色してみました。センスない？（汗） どうでしょう？少しはきれいになったでしょ。 ってことでソースを公開（笑） <TABLE border="3" bordercolor="#3333aa" bgcolor="#aaaaaa"> 　　<TR height="20"> 　　　　<TD width="40" bgcolor="#3366cc"></TD> 　　　　<TD width="50">　</TD> 　　　　<TD width="50" bgcolor="#3366cc">　</TD> 　　</TR> 　　<TR height="25" bgcolor="#3366cc"> 　　　　<TD width="50">　</TD> 　　　　<TD width="40">　</TD> 　　　　<TD width="50">　</TD> 　　</TR> </TABLE> 4.また解説 <TABLE border="3" bordercolor="#3333aa" bgcolor="#aaaaaa"> 「border」でテーブルの枠の太さを設定してます。 「bordercolor」で枠の色を設定してます。 「bgcolor」で背景の色を設定してます。 <TR height="20"> 「height」で高さを設定しています。 「width」で横幅を設定することもできます。 <TD width="40" bgcolor="#3366cc"></TD> 「width」でセルの横幅を設定してます。 「bgcolor」でセルの背景を設定しています。 このセルは中身が何もないんで枠が消えてます。 ってことで他のセルにはダミーで全角スペースが入ってます。 <TR height="25" bgcolor="#3366cc"> ここで背景色を設定すれば行ごと有効になります。 5.結合させたい セルを結合して大きなセルを作ることも出来るんです。 これを使うとデザインの幅が広がるかも。 とりあえずこんな感じです。 これは5x4のテーブルを加工したものです。 あの。説明しなきゃダメ？（殴） とりあえずソースを見てください。 <TABLE border="3" bordercolor="#3333aa" bgcolor="#aaaaaa" height="100" width="150"> 　　<TR> 　　　　<TD colspan="3">　</TD> 　　　　<TD>　</TD> 　　</TR> 　　<TR> 　　　　<TD>　</TD> 　　　　<TD>　</TD> 　　　　<TD>　</TD> 　　　　<TD>　</TD> 　　</TR> 　　<TR> 　　　　<TD rowspan="2">　</TD> 　　　　<TD>　</TD> 　　　　<TD>　</TD> 　　　　<TD>　</TD> 　　</TR> 　　<TR> 　　　　<TD>　</TD> 　　　　<TD>　</TD> 　　　　<TD>　</TD> 　　</TR> 　　<TR> 　　　　<TD>　</TD> 　　　　<TD>　</TD> 　　　　<TD>　</TD> 　　　　<TD>　</TD> 　　</TR> </TABLE> 6.結合の説明 <TD colspan="3">　</TD> 「colspan」で行（横）の結合をします。 「rowspan」で列（縦）の結合をします。 この場合、横にセルが4個あるので3個を結合したら2つになりますね。 ってことでこの行（<TR>〜</TR>）に書く<TD>〜</TD>は２組です。 これは行を設定するタグなので次の行は普通に戻ってますよね。 <TD rowspan="2">　</TD> 上で書いたようにこれで列を結合してます。 でもここで大切なのは次の行（<TR>〜</TR>）の記述です。 よく見てもらうと<TD>〜</TD>が3組でしょ。 ここで「rowspan="2"」と書いてるので下の（1番左の）セルも含まれてるんです。 ここでは2で設定してあるんで5行目はセルが4つに戻っています。 △ 上へ △
		HOME　 |　雑記　 |　メモ　 |　掲示板　 |　SCRIPT　 |　HTML　 |　リンク　 |　メール