ホームページのテーブル・表の作り方(HP作成参考資料)
ホームページを作成する際、表（テーブル）は、単に表を、表として利用する他に、しきりとして利用するなどの他に、たくさんの 利用価値がありますが、それによっ多くの装飾をすることで、かえってホームページが重く成らないように心がけましょう。
表（テーブル）を作るには、＜ｔａｂｌｅ＞・＜ｔｒ＞・＜ｔｄ＞の３つのタグの単純な組み合わせで作成できます。また、いろい ろなテーブルを組み合わせる事で、より多くの複雑な表現を簡単に表示する事が、可能に成ります。
(表２)一寸複雑な表
●表を作る、＜ｔａｂｌｅ＞・＜ｔｒ＞・＜ｔｄ＞の３つのタグの組み合わせを、具体的に書くと、 ＜ｔａｂｌｅ＞＜ｔｒ＞＜ｔｄ＞★＜／ｔｄ＞＜／ｔｒ＞＜／ｔａｂｌｅ＞と成ります(★ここには、ホームページ中で書きたい事などこと がらを書く。そうすると左図１表のｔｄと書かれた箇所に表示される。又、画像タグ(＜img src="画像ファイル名"＞)を使えば画像も入ることが出来る。
● 列を横に追加するには、＜ｔｒ＞と＜／ｔｒ＞の間に＜ｔｄ＞★＜／ｔｄ＞を追加していく、追加した数だけ列が出来る。
● 行を縦に追加するには、＜ｔｒ＞＜ｔｄ＞★＜／ｔｄ＞＜／ｔｒ＞を追加していく、追加した数だけ行が出来る。
実際左図(表１)のようになっています。
左図(表２)は、横結合(A＋B)と縦結合(D+G)が入った一寸複雑な表に成っています。
● 横結合(Ａ＋Ｂ)の作り方を説明します。
セルを横に結合するには、＜ｔｄ＞タグにＣｏｌｓｐａｎ＝""と言う属性を付けます。
ＡとＢのセルを結合しますので、＜ｔｄ Ｃｏｌｓｐａｎ＝"２"＞と記述します。
具体的には、＜ｔｒ＞＜ｔｄ Ｃｏｌｓｐａｎ＝"２"＞A＋B＜／ｔｄ＞＜ｔｄ＞Ｃ＜／ｔｄ＞＜ｔｄ＞Ｄ＜／ｔｄ＞＜／ｔｒ＞と 記述します
● 縦結合(Ｅ＋Ｉ)の作り方を説明します。
セルを縦に結合するには、＜ｔｄ＞タグにｒｏｗｓｐａｎ＝""と言う属性を付けます。
ＥとＩのセルを結合しますので、＜ｔｄ ｒｏｗｓｐａｎ＝"３"＞と記述します。(私は縦に限りセル数＋１で記入）
具体的には、＜ｔｒ＞＜ｔｄ ｒｏｗｓｐａｎ＝"３"＞Ｅ＋Ｉ＜／ｔｄ＞＜ｔｄ＞Ｆ＜／ｔｄ＞＜ｔｄ＞Ｇ＜／ｔｄ＞＜ｔｄ＞Ｈ ＜／ｔｄ＞＜／ｔｒ＞と記述します
(表3)実際の表(表関連以外のタグは全部消してあります)
(１)テーブル関係するタグ【主なもののみ】
①＜ｔｒ＞～＜／ｔｒ＞横１列(行)
②＜ｔｄ＞～＜／ｔｄ＞セル
③枠線の幅 ： ＜ｔａｂｌｅ ｂｏｒｄｅｒ＝"★"＞～＜／ｔａｂｌｅ＞ ★ ： 枠線の幅
④セルの間隔 ： ＜ｔａｂｌｅ ｃｅｌｌｓｐａｃｉｎｇ＝"★"＞～＜／ｔａｂｌｅ＞ ★ ： セルの間隔(ピクセル)
⑤セルのマージン ： ＜ｔａｂｌｅ ｃｅｌｌｐａｄｄｉｎｇ＝"★"＞～＜／ｔａｂｌｅ＞ ★ ： セルの内のマージン(ピクセル)
⑥テキストに対するテーブルの位置 ： ＜ｔａｂｌｅ ａｌｉｇｎ＝"★"＞～＜／ｔａｂｌｅ＞ ★ ： ｌｅｆｔ，ｒｉｇｈｔ，ｃｅｎｔｅｒ
⑦テーブルに対する回り込み解除 ： ＜ｂｒ ｃｌｅａｒ＝"★"＞ ★ ：ａｌｌ，ｌｅｆｔ，ｒｉｇｈｔ
⑧テーブルとテキスト間隔指定（縦） ： ＜ｔａｂｌｅ ｖｓｐａｃｅ＝"★"＞～＜／ｔａｂｌｅ＞ ★ ： 縦方向の間隔
⑨テーブルとテキスト間隔指定（横） ： ＜ｔａｂｌｅ ｈｓｐａｃｅ＝"★"＞～＜／ｔａｂｌｅ＞ ★ ： 横方向の間隔
⑩テーブルとテキスト間隔指定 ： ＜ｔａｂｌｅ ａｌｉｇｎ＝"★"＞～＜／ｔａｂｌｅ＞ ★ ： ｌｅｆｔ，ｒｉｇｈｔ
⑪テーブルのサイズ指定 ： ＜ｔａｂｌｅ ｗｉｄｔｈ＝"★"＞～＜／ｔａｂｌｅ＞ ★ ： テーブルの幅(ピクセ又は％)
⑫テーブルのサイズ指定 ： ＜ｔａｂｌｅ ｈｅｉｇｈ＝"★"＞～＜／ｔａｂｌｅ＞ ★ ： テーブルの高さ(ピクセル)
⑬テーブルのサイズ指定 ： ＜ｔｈ ｗｉｄｔｈ＝"★"＞～＜／ｔｈ＞ ★ ： セルの幅(ピクセル)
⑭テーブルのサイズ指定 ： ＜ｔｈ ｈｅｉｇｈ＝"★"＞～＜／ｔｈ＞ ★ ： セルの高さ(ピクセル)
⑮テーブルのサイズ指定 ： ＜ｔｄ ｗｉｄｔｈ＝"★"＞～＜／ｔｄ＞ ★ ： セルの幅(ピクセル)
⑯テーブルのサイズ指定 ： ＜ｔｈ ｈｅｉｇｈ＝"★"＞～＜／ｔｈ＞ ★ ： セルの幅(ピクセル)
⑰セル内のテキストの位置指定＜ｔｒ ａｌｉｇｎ＝"★"＞～＜／ｔｒ＞ ★ ： ｌｅｆｔ，ｒｉｇｈｔ，ｃｅｎｔｅｒ
⑱セル内のテキストの位置指定＜ｔｒ ｖａｌｉｇｎ＝"★"＞～＜／ｔｒ＞ ★ ： ｔｏｐ，ｍｉｄｄｌｅ，ｂｏｔｔｏｍ，ｂａｓｅｌｉｎｅ
⑲セル内のテキストの位置指定＜ｔｈ ａｌｉｇｎ＝"★"＞～＜／ｔｈ＞ ★ ： ｌｅｆｔ，ｒｉｇｈｔ，ｃｅｎｔｅｒ
⑳セル内のテキストの位置指定＜ｔｈ ｖａｌｉｇｎ＝"★"＞～＜／ｔｈ＞ ★ ： ｔｏｐ，ｍｉｄｄｌｅ，ｂｏｔｔｏｍ，ｂａｓｅｌｉｎｅ
○セル内のテキストの位置指定＜ｔｄ ａｌｉｇｎ＝"★"＞～＜／ｔｄ＞ ★ ： ｌｅｆｔ，ｒｉｇｈｔ，ｃｅｎｔｅｒ
○セル内のテキストの位置指定＜ｔｄ ｖａｌｉｇｎ＝"★"＞～＜／ｔｄ＞ ★ ： ｔｏｐ，ｍｉｄｄｌｅ，ｂｏｔｔｏｍ，ｂａｓｅｌｉｎｅ
①枠線の色＜table border="★" bordercolor="◇"＞～＜/table＞ ★ : 枠線の幅 ◇ ： 色指定（例#rrggbb又は色名)
②外枠線の表示法指定＜table frame="★" ＞～＜/table＞ ★ : (void(デホルト),above(上のみ),below(下のみ),hsidss (上
下のみ),vsides(左右のみ),lhs(左のみ),rhs(右のみ)他）
③内罫線線の表示法指定＜table rules="★" ＞～＜/table＞ ★ ： （none(デホルト),rows(横列の境界のみ),cols(縦列
の境界のみ),all(全ての境界)ほか
④背景色指定＜ｔａｂｌｅ ｂｇｃｏｌｏｒ＝"★"＞～＜／ｔａｂｌｅ＞ ★ ： 色指定（例＃ｒｒｇｇｂｂ又は色名)
⑤背景色指定＜ｔｒ ｂｇｃｏｌｏｒ＝"★"＞～＜／ｔｒ＞ ★ ： 色指定（例＃ｒｒｇｇｂｂ又は色名)
⑥背景色指定＜ｔｈ ｂｇｃｏｌｏｒ＝"★"＞～＜／ｔｈ＞ ★ ： 色指定（例＃ｒｒｇｇｂｂ又は色名)
⑦背景色指定＜ｔｄ ｂｇｃｏｌｏｒ＝"★"＞～＜／ｔｄ＞ ★ ： 色指定（例＃ｒｒｇｇｂｂ又は色名)
①背景画像指定＜table background＝"★"＞～＜/table＞ ★ ： 画像指定(例画像ﾌｧｲﾙ名・テーブルに指定すると
セル指定不可)
②背景画像指定＜ｔｒ ｂａｃｋｇｒｏｕｎｄ＝"★"＞～＜／ｔｒ＞ ★ ： 画像指定（例画像ファイル名)
③背景画像指定＜ｔｈ ｂａｃｋｇｒｏｕｎｄ＝"★"＞～＜／ｔｈ＞ ★ ： 画像指定（例画像ファイル名)
④背景画像指定＜ｔｄ ｂａｃｋｇｒｏｕｎｄ＝"★"＞～＜／ｔｄ＞ ★ ： 画像指定（例画像ファイル名)
