HTML によるWebページ作成 (第３回目)

表組を表示させるタグ
その他有用なタグ

1. 表組を表示させるタグ

<TABLE> ... </TABLE>
表の最初と最後に必ず付けるタグ
<TR> ... </TR>
表の各行（横の項目の並び）の最初と最後に付けるタグ
<TD> ... </TD>
表の各項目の最初と最後に付けるタグ

使用例:

<TABLE> <TR> <TD> 学部名 </TD> <TD> 文学部 </TD> <TD> 教育学部 </TD> <TD> 法学部 </TD> <TD> 経済学部 </TD> </TR> <TR> <TD> 男性 </TD> <TD> ５５９ </TD> <TD> １７１ </TD> <TD> ７４７ </TD> <TD> ９３９ </TD> </TR> (途中を省略) </TABLE>

表示例

学部名	文学部	教育学部	法学部	経済学部
男性	５５９	１７１	７４７	９３９
女性	４２１	１９６	２６１	２３７
合計	９８０	３６７	１，００８	１，１７６

<TABLE BORDER="数値"> ... </TABLE>
表に枠を付ける．数値を大きくすると枠も太くなる．
<TABLE CELLSPACING="数値"> ... </TABLE>
表の罫線の大きさを指定する．
<TABLE ALIGN="center(もしくは right)"> ... </TABLE>
表の表示位置をウィンドウの中央(もしくは右)にする．
<CAPTION ALIGN="top(もしくは bottom)"> ... </CAPTION>
表の題名(キャプション)を表の上(もしくは下)に表示する．

使用例:

<TABLE BORDER="4" CELLSPACING="3" ALIGN="center"> <CAPTION ALIGN="bottom"> 東北大文系４学部の男女学生数 </CAPTION> <TR> <TD> 学部名 </TD> <TD> 文学部 </TD> <TD> 教育学部 </TD> <TD> 法学部 </TD> <TD> 経済学部 </TD> </TR> (途中省略) </TABLE>

表示例

東北大文系４学部の男女学生数
学部名	文学部	教育学部	法学部	経済学部
男性	５５９	１７１	７４７	９３９
女性	４２１	１９６	２６１	２３７
合計	９８０	３６７	１，００８	１，１７６

<TABLE WIDTH="数値" HEIGHT="数値"> ... </TABLE>
表の大きさ(幅, 高さ)を指定する．
<TD WIDTH="数値" HEIGHT="数値"> ... </TD>
<TH WIDTH="数値" HEIGHT="数値"> ... </TH>
表の欄の幅および高さを指定する．
各行の高さは，その行内の欄の高さの最大値に一致する．
各列の幅は，その列内の欄の幅の最大値に一致する．

使用例:

<TABLE BORDER="4" CELLSPACING="3" ALIGN="center"> <CAPTION ALIGN="bottom"> 東北大文系４学部の男女学生数 </CAPTION> <TR> <TD WIDTH="100" HEIGHT="30"> 学部名 </TD> <TD WIDTH="90"> 文学部 </TD> <TD WIDTH="90"> 教育学部 </TD> <TD WIDTH="90"> 法学部 </TD> <TD WIDTH="90"> 経済学部 </TD> </TR> <TR> <TD HEIGHT="40"> 男性 </TD> <TD> ５５９ </TD> <TD> １７１ </TD> <TD> ７４７ </TD> <TD> ９３９ </TD> </TR> (途中省略) </TABLE>

表示例

学部名	文学部	教育学部	法学部	経済学部
男性	５５９	１７１	７４７	９３９
女性	４２１	１９６	２６１	２３７
合計	９８０	３６７	１，００８	１，１７６

<TH> ... </TH>
表の見出しとなる項目の最初と最後につけるタグ．項目が中寄せされ, 文字が太字になる．
<TD ALIGN="center(もしくは left, right)"> ... </TD>
<TH ALIGN="center(もしくは left, right)"> ... </TH>
<TR ALIGN="center(もしくは left, right)"> ... </TR>
表の欄内における項目の位置を中央(もしくは左, 右)にする．
<TR> の場合は, タグで囲んだ行の全ての項目に対して有効．
<TD VALIGN="top(もしくは middle, bottom)"> ... </TD>
<TH VALIGN="top(もしくは middle, bottom)"> ... </TH>
<TR VALIGN="top(もしくは middle, bottom)"> ... </TR>
表の欄内における項目の位置を欄の上段(もしくは中段, 下段)にする．
<TR> の場合は, タグで囲んだ行の全ての項目に対して有効．

使用例:

(前略) <TR> <TH HEIGHT="40"> 男性 </TH> <TD ALIGN="right"> ５５９ </TD> <TD ALIGN="right"> １７１ </TD> <TD ALIGN="right"> ７４７ </TD> <TD ALIGN="right"> ９３９ </TD> </TR> (後略)

表示例

学部名	文学部	教育学部	法学部	経済学部
男性	５５９	１７１	７４７	９３９
女性	４２１	１９６	２６１	２３７
合計	９８０	３６７	１，００８	１，１７６

<TABLE BORDERCOLOR="色の名前"> ... </TABLE>
表の外枠の色を指定．
ただし, <BODY BGCOLOR> により背景の色を指定していると指定した色にならない場合がある．
<TABLE BGCOLOR="色の名前"> ... </TABLE>
表の背景の色を指定．
<TR BGCOLOR="色の名前"> ... </TR>
表の行の背景の色を指定．
<TD BGCOLOR="色の名前"> ... </TD>
<TH BGCOLOR="色の名前"> ... </TH>
表の特定の欄の背景の色を指定．

使用例:

<TABLE BGCOLOR="cornflowerblue" BORDER="4" BORDERCOLOR="blue" CELLSPACING="3" ALIGN="center"> <TR BGCOLOR="mediumslateblue"> <TH WIDTH="100" HEIGHT="30"> 学部名 </TH> <TH WIDTH="90"> 文学部 </TH> <TH WIDTH="90"> 教育学部 </TH> <TH WIDTH="90"> 法学部 </TH> <TH WIDTH="90"> 経済学部 </TH> </TR> <TR> <TH BGCOLOR="mediumslateblue" HEIGHT="40"> 男性 </TH> <TD ALIGN="right"> ５５９ </TD> <TD ALIGN="right"> １７１ </TD> <TD ALIGN="right"> ７４７ </TD> <TD ALIGN="right"> ９３９ </TD> </TR> (後略)

表示例

学部名	文学部	教育学部	法学部	経済学部
男性	５５９	１７１	７４７	９３９
女性	４２１	１９６	２６１	２３７
合計	９８０	３６７	１，００８	１，１７６

２. その他有用なタグ

<BODY BACKGROUND="画像ファイル名"> ... </BODY>
ページの背景にイメージを配置する．
指定した画像ファイルにより，ページの背景が縦横に埋め尽くされる．
例１：青い四角いボタンを背景にした場合 bg1.html
例２：茶色のチェック模様を背景にした場合 bg2.html
<BODY LINK="色の名前" ALINK="色の名前" VLINK="色の名前" > ... </BODY>
ページのリンクに関連する文字の色を設定する．
LINK はリンクが設定された部分の文字の色（通常は青）
ALINK はリンクが設定された部分の文字をクリックしているときの文字の色（通常は赤）
VLINK はリンクが設定された部分の文字の色（リンク先をすでに訪問した場合）（通常は紫）

使用例: link2.html

<BODY BGCOLOR="pink" LINK="white" ALINK="gray" VLINK="black"> リンクに関連する文字の色を変えてみました． <A HREF="http://www.is.tohoku.ac.jp"> 東北大学情報科学研究科 </A> </BODY>

レポート課題: 自己紹介のWebページを完成させて公開しなさい。
締め切り: ６月２０日（金）授業終了時まで