第４回目

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"> <CAPTION ALIGN="bottom"> 東北大文系４学部の男女学生数 </CAPTION> <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> (後略)

表示例

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

<TH ROWSPAN="またがる欄の数"> ... </TH>
<TD ROWSPAN="またがる欄の数"> ... </TD>
縦方向の複数の欄にまたがる大きな枠を作る．
<TH COLSPAN="またがる欄の数"> ... </TH>
<TD COLSPAN="またがる欄の数"> ... </TD>
横方向の複数の欄にまたがる大きな枠を作る．

使用例:

(前略) <TR> <TH> </TH> <TH> </TH> <TH COLSPAN="4" BGCOLOR="dodgerblue"> 文系学部 </TH> </TR> <TR BGCOLOR="mediumslateblue"> <TH> </TH> <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 ROWSPAN="2" BGCOLOR="dodgerblue"> 性別 </TH> <TH BGCOLOR="mediumslateblue" HEIGHT="40"> 男性 </TH> <TD ALIGN="right"> ５５９ </TD> <TD ALIGN="right"> １７１ </TD> <TD ALIGN="right"> ７４７ </TD> <TD ALIGN="right"> ９３９ </TD> </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> (後略)

表示例 ==> table1.html もう少し工夫するとこんな風にも出来ます ==> table2.html

2. 段落に関するタグその２

※ 以下のタグは使用するブラウザおよびそのバージョンによって見え方が変わる可能性があります．使用する際には様々なブラウザでチェックすることを勧めます．
※ 以下のタグは <DIV> にも同様に使えます．

<P STYLE="line-height:行間距離(単位付き)"> ... </P>
段落内の行間の距離を設定． 10mm, 3cm などのように設定する．
<P STYLE="text-indent:字下げ幅(単位付き)"> ... </P>
段落の最初の字下げの幅を設定．
<P STYLE="width:幅(単位付き)"> ... </P>
段落の各行の幅を設定．
<P STYLE="margin:幅(単位付き)"> ... </P>
<P STYLE="margin-top(もしくは -bottom, -left, -right): 幅(単位付き)"> ... </P>
段落の回りの余白(マージン)を設定．
margin-top などを使うと，上側，下側，右側, 左側の余白をそれぞれ独立に設定可能．
<P STYLE="background-color:色の名前"> ... </P>
段落の背景の色を設定．
<P STYLE="position:absolute; top:上からの距離; left:左からの距離" > ... </P>
ページの左上を起点として，指定した場所に段落の位置を設定．
<P STYLE="position:relative; top:上からの距離; left:左からの距離" > ... </P>
直前の段落や表などを起点として，指定した場所に段落の位置を設定．

使用例:

<P STYLE="line-height:10mm; text-indent:2cm; width:12cm"> 最初の段落です．2cm だけ字下げをしてみました．<BR> 行間の距離は10mmに設定してあります．<BR> この文はかなり長い文であり, 途中に改行のタグは含まれていないのですが, この段落の幅が12cmに設定されているために, 実際には何回も改行されているように見えます. </P> <P STYLE="margin:1cm; background-color:coral"> ２番目の段落です．<BR> 余白の幅を1cmに設定しました．<BR> 背景の色は coral です． </P> <P STYLE="position:absolute; top:7cm; left:10cm"> ３番目の段落です．<BR> この段落はページの左上を起点として, 下に7cm, 右に10cmのところにあります． </P>

表示例:parag2.html

第４回目レポート課題:
次の条件を満たすように， web ページを作成しなさい．

今回学んだタグをなるべく使って, 表を３つ以上書きなさい．
今回学んだ段落に関するタグをうまく使って, レイアウトを工夫した文章(自己紹介など)を作りなさい．

ファイル名: report4.html
締め切り:
※火曜日の受講生 →１１月１２日（月）正午まで
※金曜日の受講生 →１１月１５日（木）正午まで

第４回目

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

2. 段落に関するタグ その２

2. 段落に関するタグその２