＃ＨＰでおこづかい関連コラム
mini Info
オススメＢＯＯＫＳ
ＨＰ作成の知識として、まず基本の構造をＨＴＭＬで、次にデザインをＣＳＳ（スタイルシート）で、さらにＨＰに動きを加えるＪＡＶＡ。これらの知識を辞書感覚で引いて使える本です！この本の売りはなんといっても見やすい！実際の記述例が示してあるので誰でも簡単に使えます。それぞれ、
□HTMLタグ辞典
□スタイルシート辞典
□JavaScript辞典 第2版
は、それぞれの知識を詳しく説明してくれており順番どおりに使っていけば自分のレベルアップがよくわかります。
大事な点だけ全部を一冊にまとめられた
□ホームページ辞典
は、先ほどの三冊を1つにまとめこの一冊で全ての要点を抑えており、価格も手ごろです！全ての知識が辞書引きできて見やすい本はあまりないのでオススメの一冊です。
ＨＰ作成の知識として、まず基本の構造をＨＴＭＬで、次にデザインをＣＳＳ（スタイルシート）で、さらにＨＰに動きを加えるＪＡＶＡ。これらの知識を辞書感覚で引いて使える本です！この本の売りはなんといっても見やすい！実際の記述例が示してあるので誰でも簡単に使えます。それぞれ、
□HTMLタグ辞典
□スタイルシート辞典
□JavaScript辞典 第2版
は、それぞれの知識を詳しく説明してくれており順番どおりに使っていけば自分のレベルアップがよくわかります。
大事な点だけ全部を一冊にまとめられた
□ホームページ辞典
は、先ほどの三冊を1つにまとめこの一冊で全ての要点を抑えており、価格も手ごろです！全ての知識が辞書引きできて見やすい本はあまりないのでオススメの一冊です。
1500円以上で送料無料！
Contents2
■web知識講座
HＴＭＬタグ④
テーブルに関するタグ
★テーブルを挿入する
テーブルは、行と列から構成される表のことです。表の横の列を行、縦の列を列といいます。そして各マスをセルといい、何行目の何列目のセルかということから例えば二行目で二列目のセルを（２・２）といいます。これまでを、以下の図の例から理解してください。| （１・１） | （１・２） | （１・３） |
| （２・１） | （２・２） | （２・３） |
| （３・１） | （３・２） | （３・３） |
又、＜ＣＡＰＴＩＯＮ＞～＜／ＣＡＰＴＩＯＮ＞で表の題をつけることができます。基本的に表題は表の上につきますが、ＡＬＩＧＮ＝”ＢＯＴＴＯＭ”をつけて表題を下につけることもできます。
ブラウザでの表示例
＜TABLE＞
＜TH＞＜TD＞（１・１）＜/TD＞＜TD＞（１・２）＜/TD＞＜/TH＞
＜TH＞＜TD＞（２・１）＜/TD＞＜TD＞（２・２）＜/TD＞＜/TH＞
＜/TABLE＞
＜TH＞＜TD＞（１・１）＜/TD＞＜TD＞（１・２）＜/TD＞＜/TH＞
＜TH＞＜TD＞（２・１）＜/TD＞＜TD＞（２・２）＜/TD＞＜/TH＞
＜/TABLE＞
| （１・１） | （１・２） |
| （２・１） | （２・２） |
＜TABLE＞
＜CAPTION＞表の題名＜/CAPTION＞
＜TH＞＜TD＞（１・１）＜/TD＞＜TD＞（１・２）＜/TD＞＜/TH＞
＜TH＞＜TD＞（２・１）＜/TD＞＜TD＞（２・２）＜/TD＞＜/TH＞
＜/TABLE＞
＜CAPTION＞表の題名＜/CAPTION＞
＜TH＞＜TD＞（１・１）＜/TD＞＜TD＞（１・２）＜/TD＞＜/TH＞
＜TH＞＜TD＞（２・１）＜/TD＞＜TD＞（２・２）＜/TD＞＜/TH＞
＜/TABLE＞
| （１・１） | （１・２） |
| （２・１） | （２・２） |
★枠の消去と背景色
テーブルの枠は、＜ＴＡＢＬＥ ＢＯＲＤＥＲ＝”数字”＞で、上の表は数字が１です。数字が増えれば枠は太くなります。逆に数字を０にすれば枠が消えるので、うまく枠を消して使えばそれなりのデザインができます。その他にテーブルや各セルの背景色をＢＧＣＯＬＯＲ＝”色”で変えてうまく使いましょう！ブラウザでの表示例
＜TABLE border="0"＞
＜TH BGCOLOR="#FFEEEE"＞
＜TD＞月＜/TD＞＜TD＞一月＜/TD＞＜TD＞二月＜/TD＞＜TD＞三月＜/TD＞
＜/TH＞
＜TH BGCOLOR="#FFFFEE"＞
＜TD＞おこずかい＜/TD＞＜TD＞1000円＜/TD＞＜TD＞2000円＜/TD＞＜TD＞3000円＜/TD＞
＜/TH＞
＜/TABLE＞
＜TH BGCOLOR="#FFEEEE"＞
＜TD＞月＜/TD＞＜TD＞一月＜/TD＞＜TD＞二月＜/TD＞＜TD＞三月＜/TD＞
＜/TH＞
＜TH BGCOLOR="#FFFFEE"＞
＜TD＞おこずかい＜/TD＞＜TD＞1000円＜/TD＞＜TD＞2000円＜/TD＞＜TD＞3000円＜/TD＞
＜/TH＞
＜/TABLE＞
| 月 | 一月 | 二月 | 三月 |
| おこずかい | １０００円 | ２０００円 | ３０００円 |
★セルの結合
それぞれのセルを結合することで、デザインの幅がぐっと広がります！まず横方向にセルを結合する方法です。例えば、＜ＴＤ＞＜／ＴＤ＞＜ＴＤ＞＜／ＴＤ＞＜ＴＤ＞＜／ＴＤ＞となっているセルの前２つを結合する時は、＜ＴＤ ＣＯＬＳＰＡＮ＝”２”＞＜／ＴＤ＞＜ＴＤ＞＜／ＴＤ＞とします。つまり結合したいセルの一番左のセルにＣＯＬＳＰＡＮ＝”結合したい数”とすればその分のセルの個数にとって代わるわけです。又、縦に結合するには同じように結合したいセルの一番上のセルを今度は＜ＴＤ ＲＯＷＳＰＡＮ＝”結合したいセルの数”＞とすればその分のセルの数にとって変わります。ブラウザでの表示例
＜TABLE＞
＜TH＞
＜TD COLSPAN="2"＞（１・１）と（１・2）結合セル＜/TD＞
＜/TH＞
＜TH＞
＜TD＞（２・１）＜/TD＞＜TD＞（２・２）＜/TD＞
＜/TH＞
＜/TABLE＞
＜TH＞
＜TD COLSPAN="2"＞（１・１）と（１・2）結合セル＜/TD＞
＜/TH＞
＜TH＞
＜TD＞（２・１）＜/TD＞＜TD＞（２・２）＜/TD＞
＜/TH＞
＜/TABLE＞
| （１・１）と（１・２）結合セル | |
| （２・１） | （２・２） |
＜TABLE＞
＜TH＞
＜TD ROWSPAN="2"＞（１・１）と（２・１）結合セル＜/TD＞＜TD＞（１・２）＜/TD＞
＜/TH＞
＜TH＞
＜TD＞（２・２）＜/TD＞
＜/TH＞
＜/TABLE＞
＜TH＞
＜TD ROWSPAN="2"＞（１・１）と（２・１）結合セル＜/TD＞＜TD＞（１・２）＜/TD＞
＜/TH＞
＜TH＞
＜TD＞（２・２）＜/TD＞
＜/TH＞
＜/TABLE＞
| （１・１）と（２・１）結合セル | （１・２） |
| （２・２） |
★セル内の位置指定
セル内の文字やイメージの位置指定するには、そのセルのタグに半角開けてＡＬＩＧＮ＝”位置”とします。又、縦方向の位置指定は何もしないとＭＩＤＤＬＥになっているので、上に寄せたいときはＴＯＰを下に寄せたいときはＢＯＴＴＯＭをＶＡＬＩＮＧ＝”縦の位置”に挿入しましょう。
copyright(c)2005 おこづかいguide All Right Reserved