HTMLのタグ辞典です。すべて暗記するなんて無理ですから^_^;　辞書代わりに使ってください☆ヽ(▽⌒*)♪

■テーブル（表）を作るには

本来テーブルは表を作成するタグですが、レイアウト目的に使われることが非常に多いです。今でこそスタイルシートに移行しつつありますが、まだまだテーブルレイアウトのサイトは多いです。実はこのサイトもテーブルでレイアウトしています^_^;　
姉妹サイト「３日で作るホームページ」のほうは完全にスタイルシートを使ったレイアウトなので比べてみるとよくわかります。

テーブルレイアウトの利点は、ページ全体をきれいに並べることができるところにあります。ホームページのプロもよく使う技です。主流と言っていいかもしれません。基本的にレイアウトは、テーブルかスタイルシートかのどちらかになります。

ただ、欠点はこのページのソースを見てもわかると思いますが、ソースがものすごく複雑になってしまいます・・・。修正するときなんか、どこがどこだかわかりづらくなるし、ページを読み込む時間が若干長くなります。

また、本来はテーブルを使ったレイアウトは、推奨されてはいないのです。W3Cという規格を定める機関が正式に発表しています。本来レイアウトはスタイルシートで行うべきとしています。なので、これからホームページを作成する方は、できればスタイルシートでのレイアウトをオススメします。徐々にそういう流れになりつつあるので。スタイルシートも覚えれば難しくはないし、テーブルレイアウトと変わらないレイアウトをとることができます。

そうは言っても、本来の表としての使用はもちろんＯＫですよ。

実際はこれだけでは表示されません。一般的な使い方は次のようなソースになります。

これを実際に表すと

となります。

<table>〜<table>は、この間がテーブルであることを表します。

tr は行を表します。<tr>〜</tr>の間が行です。横の一列という意味になります。

<th>〜</th> は見出しになります。初期値では、太字でセンタリングされて表示されます。

<td>〜</td> は一つのセルになります。ここに文字などを記述します。　

<caption>〜</caption>は表のタイトルになります。

■枠線の幅を指定するには

初期値では枠線は表示されません。○のなかに数字を入れます。１なら、１ピクセルになります。

■テーブルのサイズを指定するには

widthはテーブルの幅を指定します。単位は数字か％で指定します。100px なら100と入れます。％は親要素に対する割合で表示されます。

height は高さを指定します。実際はtable ではなく、td タグなどに使います。

■セルのサイズを指定するには

指定方法は上のテーブルとまったく同じです。table を th や td にするだけです。

■セル内の文字の位置を指定するには

align で横方向の行揃えです。○には、left,center,right が入ります。指定なしはleftです。

valignで縦方向の指定です。○には、top（上）、middle（中央）、bottom（下）、baseline（横方向の文字のベースライン基準）があります。指定なしはmiddle です。

■セルの間隔とマージンを指定するには

cellspacing はテーブルの外枠とセル、セルとセルの間隔を指定します。○には数字が入ります。単位はピクセルになります。

cellpadding はセルの枠とセル内の文字などの内容との間隔を指定します。こちらも○には数字が入ります。

通常表を作成すると枠線が２重になりますが、cellspacing="0" を指定することで枠線を一本にすることができます。

■枠線の色を指定するには

bordercolor は枠線の色を表します。通常の色の指定と同じで、色名を直接書き込むか、RGB値（例・ff00bf）で指定します。

bordercolorlight と bordercolordark は左側と上、右と下で色を分けて、立体的に表示できます。スペルが長いので、間違わないようにしましょう＾＾；てか、こっちは使う機会あるかな・・・・（汗）

■テーブルの背景色を指定するには

tableなら全体に背景が表示され、tr,td,th,なら、それぞれの背景だけが表示されます。

■テーブルの背景に画像を表示させるには

○には画像のファイル名を入れます。ファイル名はすべて半角英数字（小文字）にしましょう。

■縦方向にセルを連結させるには

指定されたセルから、指定された数の下方向にセルが連結します。
わかりにくいですね・・・＾＾；　実際に書いてみますね。

実際に表すと、

■横方向にセルを連結させるには

指定されたセルから、指定された数の右方向にセルが連結します。
こちらも実際に書いてみますね。

実際に表すと、

一般的な使い方として、表のソースを書きますので参考にしてください。これはスタイルシートにおける単位の種類です。

これを実際に表すと

となります。これにスタイルシートで色や背景などの指定をしてみます。

参考までに、スタイルシートに以下のソースを書き込んでみます。スタイルシートの使い方は姉妹サイトの「３日で作るホームページ♪」を参考にしてください。

スタイルシートでは複数のセレクタ（要素）（上の例ではtd ,th）をカンマ,で区切って同時にスタイルを指定することができます。 上のソースを実際にブラウザ見ると下のようになります。

まぁ、ちょっと見た目はわかりづらいかもしれないですね・・・・

ようは、<tr>〜 </tr>　の間の <td> 〜 </td>の数が横のセルの数（マス目の数）になるわけです。上のソースではtd が三つづつあるので、横に三つに区切られてるわけです。また、<tr> 〜 </tr>の数だけ下に増えるということです。

テーブルはソースが複雑で、はじめの頃はうまくいかないことも多いです。慣れるまではとにかくやりまくるしかないですね・・・。また、表をうまく使うと、ページ自体を表でレイアウトすることもできます。あまり推奨されてはいないみたいですが、使いこなせばきれいなレイアウトができるようになります。まぁ使わなくてもできますが・・・ このサイトのページもテーブルでレイアウトしています。参考になるかどうかわかりませんが（笑）　テーブル使ってレイアウトしてるサイトはたくさんあるので、いろんなサイトを見て勉強するしかないですね・・・・。