表（テーブル）を作る（２）

☆表（テーブル）を作る（２）

◎ 表(TABLE)の属性（１） ＜TABLE＞タグ内に記述します

1	BORDER="n"	表の枠線の太さを指定 "n"に数値（ピクセル）を記入
2	BORDERCOLOR="x"	表の枠線の色を指定 "x"にRGB値かカラーネームを記入
3	BGCOLOR="x"	表の背景色を指定 "x"にRGB値かカラーネームを記入
4	WIDTH="n"	表の横幅を指定 "n"に数値(ピクセル)、 "n％"で指定も可(ウインドウに対する比率)

※ 表(TABLE)の属性（１）＝（テーブルサンプル２）のソース
→ テーブルサンプル（２）へ

※ ご自身で作られたHTMLファイルにサンプルのソースをコピーしてください。
また、サンプル内の数値やカラーネームなどを変更してブラウザーの表示が、どう変化するかも確認してください

<HTML>
<HEAD>
   <TITLE>テーブルサンプル（２）</TITLE>
</HEAD>
<BODY>

   <TABLE BORDER="1" BORDERCOLOR="green" BGCOLOR="lavender" WIDTH="300">
   <TR>
   <TD>1行目1列目</TD>
   <TD>1行目2列目</TD>
   <TD>1行目3列目</TD>
   </TR>

   <TR>
   <TD>2行目1列目</TD>
   <TD>2行目2列目</TD>
   <TD>2行目3列目</TD>
   </TR>

   <TR>
   <TD>3行目1列目</TD>
   <TD>3行目2列目</TD>
   <TD>3行目3列目</TD>
   </TR>
   </TABLE>

</BODY>
</HTML>

意味
※「テーブルを開始(表組みを始めます)」
※「表の枠線の太さはピクセル値 "１" で表示」
※「表の枠線の色は "グリーン"で表示」
※「表の背景色は "ラベンダー"で表示」
※「表全体の幅はピクセル値"300"です」

◎ 表(TABLE)の属性（２） ＜TABLE＞タグ内に記述します

5	CELLPADDING="n"	枠線と表示内容の間隔を指定 "n"に数値(ピクセル値)
6	CELLSPACING="n"	セルとセルの間隔を指定 "n"に数値(ピクセル値)

※ 表(TABLE)の属性（２）＝（テーブルサンプル３）のソース
→ テーブルサンプル（３）へ

<HTML>
<HEAD>
   <TITLE>テーブルサンプル（３）</TITLE>
</HEAD>
<BODY>

   <TABLE BORDER="1" BORDERCOLOR="green" WIDTH="450"
    CELLPADDING="10" CELLSPACING="10">
   <TR>
   <TD>1行目1列目</TD>
   <TD>1行目2列目</TD>
   <TD>1行目3列目</TD>
   </TR>

   <TR>
   <TD>2行目1列目</TD>
   <TD>2行目2列目</TD>
   <TD>2行目3列目</TD>
   </TR>

   <TR>
   <TD>3行目1列目</TD>
   <TD>3行目2列目</TD>
   <TD>3行目3列目</TD>
   </TR>
   </TABLE>

</BODY>
</HTML>

意味
※「テーブルを開始(表組みを始めます)」
※「表の枠線の太さはピクセル値 "１" で表示」
※「表の枠線の色は "グリーン"で表示」
※「表全体の幅はピクセル値"300"です」
※「枠線とセル内の表示内容との間隔はピクセル値"10"です」
※「セルとセルの間隔幅はピクセル値"10"です」

◎ 表(TABLE)の属性（３）

7	ALIGN="center"	表示位置を決める "center"で中央寄せ
8	ALIGN="left"	表示位置を決める "left"で左寄せ
9	ALIGN="righit"	表示位置を決める "right"で右寄せ
10	VALIGN="top"	表示位置を決める "top"で上揃え
11	VALIGN="middle"	表示位置を決める "middle"で中央揃え（中段）
12	VALIGN="bottom"	表示位置を決める "bottom"で下揃え

※ ＜WIDTH＞＜ALIGN＞＜VALIGN＞はそれぞれ＜TD＞＜TH＞ のタグ内に入れてセル単位で指定することも出来ます。

※ ＜TABLE＞タグ内に記述することにより表全体の幅や表示位置を指定します。
＜TD＞＜TH＞タグ内に記述することによりセル単位で幅や表示位置を指定します。

※ 表(TABLE)の属性（３）＝（テーブルサンプル４）のソース
→ テーブルサンプル（４）へ

<HTML>
<HEAD>
   <TITLE>テーブルサンプル（４）</TITLE>
</HEAD>
<BODY>

   <TABLE BORDER="1" BORDERCOLOR="green" WIDTH="450"
    CELLPADDING="10" CELLSPACING="10"
    ALIGN="center" VALIGN="middle">
   <TR>
   <TD>1行目1列目</TD>
   <TD>1行目2列目</TD>
   <TD>1行目3列目</TD>
   </TR>

   <TR>
   <TD>2行目1列目</TD>
   <TD>2行目2列目</TD>
   <TD>2行目3列目</TD>
   </TR>

   <TR>
   <TD>3行目1列目</TD>
   <TD>3行目2列目</TD>
   <TD>3行目3列目</TD>
   </TR>
   </TABLE>

</BODY>
</HTML>

◎ 表(TABLE)の属性（４） ＜TD＞または＜TH＞タグ内に記述します（セル単位で指定）

13	ROWSPAN="n"	複数行のセルを結合(まとめる)を指定 "n"にまとめる行数を記入
14	COLSPAN="n"	複数列のセルを結合(まとめる)を指定 "n"にまとめる列数を記入

※ 表(TABLE)の属性（４）＝（テーブルサンプル５）のソース
→ テーブルサンプル（５）へ

<HTML>
<HEAD>
   <TITLE>テーブルサンプル（５）</TITLE>
</HEAD>
<BODY>

   <TABLE BORDER="1" BORDERCOLOR="green" WIDTH="450"
    CELLPADDING="10" CELLSPACING="10">
   <TR>
   <TD>1行目1列目</TD>
   <TD COLSPAN="2">1行目2列目と3列目</TD>
   </TR>

   <TR>
   <TD ROWSPAN="2">2行目と3行目の1列目</TD>
   <TD>2行目2列目</TD>
   <TD>2行目3列目</TD>
   </TR>

   <TR>
   <TD>3行目2列目</TD>
   <TD>3行目3列目</TD>
   </TR>
   </TABLE>

</BODY>
</HTML>

◎ 表(TABLE)のその他のタグ

15	<CAPTION> ～ <CAPTION>	表(テーブル)の上部センターに表のタイトル(表題)をつける "～"にタイトルを記入属性＜ALIGN="bottom"＞で表の下に表示も可能

※ 表(TABLE)のその他のタグ＝（テーブルサンプル６）のソース
→ テーブルサンプル（６）へ

<HTML>
<HEAD>
   <TITLE>テーブルサンプル（６）</TITLE>
</HEAD>
<BODY>

   <TABLE BORDER="1" BORDERCOLOR="green" WIDTH="450"
    CELLPADDING="10" CELLSPACING="10">
   <CAPTION>表題＝タイトルです<CAPTION>
   <TR>
   <TD>1行目1列目</TD>
   <TD>1行目2列目</TD>
   <TD>1行目3列目</TD>
   </TR>

   <TR>
   <TD>2行目1列目</TD>
   <TD>2行目2列目</TD>
   <TD>2行目3列目</TD>
   </TR>

   <TR>
   <TD>3行目1列目</TD>
   <TD>3行目2列目</TD>
   <TD>3行目3列目</TD>
   </TR>
   </TABLE>

</BODY>
</HTML>

利用方法の説明ページへ