４．TABLEタグを使う

　4-1,TABLEとは

TABLEとは,

こんな

感じの

表を作るタグです。

中に文字を入れたり、

バックはこの色

ノーマル

部分的に色替え

と、色を変えたり、画像を入れたり出来ます。
一段ではなくもっと増やすこともできます。

一段の一	１−２
二段の一	２−２	２−３

見出しとして文字を太字にしたりすることもできます。

　4-2, MAKE*MAKE

表の作成には<table>〜</table>で囲むタグを使用しています。ただし<table>〜</table>で、ただ囲むだだけでは表は作れません。
実際にはこれにNO,1の表↓

<table> <tr> <td>〜</td> </tr> </table>

とします。trやtdは何かというと、trが行でtdが縦の区切りになっています。（縦を増やしたいときはtrを増やし、その行の区切りの分だけtdを増やす）
縦の行は３行で、１行目にセル１個、２行目にせる２個、３行目にセル１個を作るとします↓（見やすいように表の枠を表示させています。枠の表示のさせ方は次をみてください）
NO,2の表

<table> <tr> <td>１行目</td> </tr> <tr> <td>２行目の１個目</td> <td>２行目の２個目</td> </tr> <tr> <td>３行目</td> </tr> </table>

実際にどうなったかというと↓

１行目
２行目の１個目	２行目の２個目
３行目

以上が基本的な表の雰囲気は終わりですが、まだ作り始めないでくださいね。

　4-3,枠組み

では、上のタグをコピーしてhtmlファイルにペーストして見てください。
ちゃんと表示されましたか？〜しか表示されませんよね？
それは、実際に表は作られているのですが、枠線が見えない状態になっているので表は無いように感じているのです↓

〜

そこで<table>〜</table>タグにborderという属性を付け足してあげればいいのです。
（ちなみにtableは要素名、↓の☆は値、あわせた部分を開始タグ、〜は要素内容で/のついた部分は終了タグ、この全てが要素）
<table border="☆">〜</table>☆には数字（ピクセル）　この数字の大きさが表の枠の太さになります。
また、表の大きさを画面に対して割合で決めることや、値を固定することも出来ます。
固定の仕方は、大きさの属性を入れるだけです。<table border="1" width="☆"　height="☆">・・・　（☆には、ピクセルか％を入れる。）
widthは横幅でheightは縦を示す。
他にも、セルのサイズを指定する事ことも出来ます。
<td width="☆" height="☆">　やり方は上とほとんど同じで、属性を入れる部分が大元のtableから小さい単位のtdに変わっただけです

　4-4,グラフィック

今のままではただの枠でしかなく、見た目も冴えないのでレイアウトをきれいにしていこうと思います。
まずは、表の背景の色を変える方法ですが、bodyの時と全く同じで、要素名tableの隣にbgcolor="#色"という属性を指定するだけです。
となると、tdの隣にbgcolor="#色"を書くとどうなるかわかりますよね・・・？そうです、一つのセルだけが色が変わるのです。
では背景画像の入れ方はどうでしょう？これもBODY同様なので自分で考えてみましょう。　答えは→画像ではbackground="画像のURL"←ドラッグして反転してみてください。 的当に応用していっても出来るので、どんどん自分で他のやり方も見つけていってください。『習うより慣れろ』です。
次に枠に色をつけてみましょう。
4-3でやった<table border="">タグの形を少し変えるだけで出来てしまいます。
ほとんど変化は無いのですが、borderの属性の後にbordercolor="☆"の属性を付け足せばよいのです。　（☆は色番号or色の名前）
例　　<table border="1" bordercolor="red">〜</table>
この方法ですと、外枠全ての色が同じになりますが、もう一つ左上と右上の色を変えることで立体的に見えるようにすることもできます。
こちらのやり方もほとんど変わりません。上と変わった点はbordercolorの部分が細かくなり、
bordercolorlight="☆" bordercolordark="☆"　に変化した点だけです。
例     <table border="1"bordercolorlight="色" bordercolordark="色" >〜</table>↓

立体？？

　4-5,位置関係

tableタグで表を作った時に、隣に文字を置く方法を説明します。画像の時と一緒なので自分で考えてやってみるのもよいですよ！！
設定方法はこれも簡単で、普段通り作成した表にalign属性を入れて上げればよいだけです。
例　　<table align="☆">〜</table>　　　　　☆にはleft　、right　、centerを入れることが出来ます。

←この場合はrightを入れています（tableの位置が右）

これを設定してあげることにより表の横に文字を置くことが出来ます。
次に、もう表の隣に文字を置きたく無くなった場合の方法を勉強します。
これは改行タグ<br>にclearと言う属性を付ければ終わりです。

見出し	あ	い
普通	あ	い

普通に文字を入力していって、<br clear="all">

と、書くと表が終わるところまで改行されます。