5.テーブル、フレーム

ここで示すタグは、より高度に文書の体裁整えるものです
ここでは、タグの内、<TABLE><TR><TD><TH><CAPTION><FRAMESET><FRAME><NOFRAMES>について説明します
(1) <TABLE
　border
　border="外枠幅"
　cellspacing="枠幅"
　cellpadding="枠と文字の間隔"
　width="表の幅"
　height="表の高さ"
　align="位置"
　vspace="回り込みスペース"
　hspace="回り込みスペース"
　bgcolor="色"
　background="背景画像"
　bordercolor="色"
　cols="カラム数"
>
</TABLE>

このタグで囲まれた部分を表組みします
borderのみ指定すると、外枠が表示されます
borderは、外枠の幅をピクセル値で指示します
cellspacingは、セルの間の枠の幅をピクセル値で指示します
cellpaddingは、セルの枠と、そのセル内の文字との隙間をピクセル値で指示します
width、heightは、表の幅、高さをピクセル値か、数字と％で全体に対する割合で指示します
alignは、表の位置を指定し、次のいずれかが可能です
    top：上
    bottom：下
    left：左
    center：中央
    right：右
vspace、hspaceは、回り込む文字との縦、横の隙間をピクセル値で指示します
bgcolorは、表の下地の色を指示します(指定内容は、<BODY>と同じです)
backgroundは、表に敷き詰める画像を指示します(指定内容は、<BODY>と同じです)
bordercolorは、表の外枠の色を指示します(指定内容は、<BODY>と同じです)
以下は、この使い方の例です

<TABLE border="10"><TR><TD><IMG src="house.gif" width="50" height="50" align="left"></TD></TR></TABLE>は、

<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" cols="3" align="left">
<TR><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
</TABLE>は、
ＡＢＣ
ＤＥＦ


<TABLE border="1" cellspacing="4" cellpadding="1" width="300" cols="3" align="right">
<TR><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
</TABLE>は、
ＡＢＣ
ＤＥＦ


<TABLE border="1" cellspacing="1" cellpadding="4" width="80%" cols="3" align="center">
<TR><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
</TABLE>は、
ＡＢＣ
ＤＥＦ

<TABLE border="1" cellspacing="1" cellpadding="4" width="80%" cols="3" align="center" bgcolor="#00ff00">
<TR><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
</TABLE>は、
ＡＢＣ
ＤＥＦ

<TABLE border="1" cellspacing="1" cellpadding="4" width="80%" cols="3" align="center" background="pac1.gif">
<TR><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
</TABLE>は、
ＡＢＣ
ＤＥＦ

<TABLE border="4" cellspacing="1" cellpadding="4" width="80%" cols="3" align="center" bordercolor="#0000ff">
<TR><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
</TABLE>は、
ＡＢＣ
ＤＥＦ

<TABLE border="1" cellspacing="1" cellpadding="4" width="40%" cols="3" align="left">
<TR><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
</TABLE>テキストの回り込みもほら、<BR>この通り<BR clear="all">うまくいくでしょうは、
ＡＢＣ
ＤＥＦ
テキストの回り込みもほら、
この通り
うまくいくでしょう

<TABLE border="1" cellspacing="1" cellpadding="4" width="40%" cols="3" align="left" vspace="10" hspace="20">
<TR><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
</TABLE>テキストの回り込みもほら、<BR>この通り<BR clear="all">うまくいくでしょうは、
ＡＢＣ
ＤＥＦ
テキストの回り込みもほら、
この通り
うまくいくでしょう

<TABLE border="4" cellspacing="4" cellpadding="4" width="40%" cols="3" align="left" bgcolor="#00ff00" background="pac1.gif" bordercolor="#0000ff">
<TR><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
</TABLE>組み合わせると、ほら、こんなカラフルな表組も可能ですは、
ＡＢＣ
ＤＥＦ
組み合わせると、ほら、こんなカラフルな表組も可能です
(2) <TR
　align="位置"
　valign="位置"
　bgcolor="色"
　background="背景画像"
>
</TR>

このタグで囲まれた部分を、表の１列とします
alignは、セル内での行揃えを指定し、次のいずれかが可能です
    left：左
    center：中央
    right：右
valignは、セル内での縦方向の位置を指定し、次のいずれかが可能です
    top：上
    middle：中央
    bottom：下
bgcolorは、その列の下地の色を指示します(指定内容は、<BODY>と同じです)
backgroundは、その列に敷き詰める画像を指示します(指定内容は、<BODY>と同じです)
以下は、この使い方の例です

<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" cols="3" align="left">
<TR align="left"><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR align="center"><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
<TR align="right"><TD>Ｇ</TD><TD>Ｈ</TD><TD>Ｉ</TD></TR>
</TABLE>は、
ＡＢＣ
ＤＥＦ
ＧＨＩ


<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" height="120" cols="3 align="left">
<TR align="top"><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR align="middle"><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
<TR align="bottom"><TD>Ｇ</TD><TD>Ｈ</TD><TD>Ｉ</TD></TR>
</TABLE>は、
ＡＢＣ
ＤＥＦ
ＧＨＩ


<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" cols="3" align="left">
<TR><TD>Ａ</TD><TD>Ｂ</TD><TD>Ｃ</TD></TR>
<TR bgcolor="#ff8080"><TD>Ｄ</TD><TD>Ｅ</TD><TD>Ｆ</TD></TR>
<TR background="pac1.gif"><TD>Ｇ</TD><TD>Ｈ</TD><TD>Ｉ</TD></TR>
</TABLE>は、
ＡＢＣ
ＤＥＦ
ＧＨＩ
(3) <TD
　align="位置"
　valign="位置"
　rowspan="セル数"
　colspan="セル数"
　width="幅"
　height="高さ"
　nowrap
　bgcolor="色"
　background="背景画像"
>
</TD>

このタグで囲まれた部分を、表の１セルとします
alignは、セル内での行揃えを指定し、次のいずれかが可能です
    left：左
    center：中央
    right：右
valignは、セル内での縦方向の位置を指定し、次のいずれかが可能です
    top：上
    middle：中央
    bottom：下
rowspanは、縦につながる複数のセルを結合する場合、その結合セル数を指示します
colspanは、横につながる複数のセルを結合する場合、その結合セル数を指示します
width、heightは、それぞれ、セルの幅、高さをピクセル値か、数字と％で全体に対する割合で指示します
nowrapは、セル内でのテキストの自動改行を禁止します
bgcolorは、そのセルの下地の色を指示します(指定内容は、<BODY>と同じです)
backgroundは、そのセルに敷き詰める画像を指示します(指定内容は、<BODY>と同じです)
以下は、この使い方の例です

<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" cols="2" align="left">
<TR><TD align="left">Ａ</TD><TD align="center">Ｂ</TD></TR>
<TR><TD align="right">Ｃ</TD><TD>Ｄ</TD></TR>
</TABLE>は、
ＡＢ
ＣＤ


<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" height="80" cols="2" align="left">
<TR><TD valign="top">Ａ</TD><TD valign="middle">Ｂ</TD></TR>
<TR><TD valign="bottom">Ｃ</TD><TD>Ｄ</TD></TR>
</TABLE>は、
ＡＢ
ＣＤ


<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" cols="2" align="left">
<TR><TD rowspan="2">Ａ</TD><TD>Ｂ</TD></TR>
<TR><TD>Ｄ</TD></TR>
</TABLE>は、
ＡＢ
Ｄ


<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" cols="2" align="left">
<TR><TD colspan="2">Ａ</TD></TR>
<TR><TD>Ｃ</TD><TD>Ｄ</TD></TR>
</TABLE>は、
Ａ
ＣＤ


<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" cols="2" align="left">
<TR><TD width="90%">Ａ</TD><TD>Ｂ</TD></TR>
<TR><TD>Ｃ</TD><TD>Ｄ</TD></TR>
</TABLE>は、
ＡＢ
ＣＤ


<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" height="80" cols="2" align="left">
<TR><TD>Ａ</TD><TD>Ｂ</TD></TR>
<TR><TD>Ｃ</TD><TD height="60">Ｄ</TD></TR>
</TABLE>は、
ＡＢ
ＣＤ


<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" cols="2" align="left">
<TR><TD nowrap>ここにちょっと長い文書をいれてみてnowrapの作用を確認しましょう</TD><TD>Ｂ</TD></TR>
<TR><TD bgcolor="#00ffff">Ｃ</TD><TD background="house.gif">Ｄ</TD></TR>
</TABLE>は、
ここにちょっと長い文書をいれてみてnowrapの作用を確認しましょうＢ
ＣＤ
(4) <TH>
</TH>

このタグで囲まれた部分を、表の１セルとし、太い文字を表示します
このタグは、中の文字を太い文字で表示する以外は、<TD>とかわりがなく、内容も同じです
主に、表のセルの見出しとして用いられます
以下は、この使い方の例です

<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" cols="2" align="left">
<TR><TH>カラム１の見出し</TH><TH>カラム２の見出し</TH></TR>
<TR><TD>ここにちょっと長い文書をいれてみてnowrapを指定しないとどうなるか見ましょう</TD><TD>Ｂ</TD></TR>
</TABLE>は、
カラム１の見出しカラム２の見出し
ここにちょっと長い文書をいれてみてnowrapを指定しないとどうなるか見ましょうＢ
(5) <CAPTION
　align="位置"
>
</CAPTION>

このタグは表の表題を表示します
alignは、表題の表示位置を指示し、「top(表の上)」、「bottom(表の下)」が指定出来ます
以下は、この使い方の例です

<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" cols="2" align="left">
<CAPTION align="top">この表は、&lt;TABLE&gt;タグの説明用です<BR>複数行の表題も可能です</CAPTION> <TR><TH>カラム１の見出し</TH><TH>カラム２の見出し</TH></TR>
<TR><TD>Ａ</TD><TD>Ｂ</TD></TR>
</TABLE>は、
この表は、<TABLE>タグの説明用です
複数行の表題も可能です
カラム１の見出しカラム２の見出し
ＡＢ


<TABLE border="1" cellspacing="1" cellpadding="1" width="80%" cols="2" align="left">
<CAPTION align="bottom">この表は、&lt;TABLE&gt;タグの説明用です<BR>複数行の表題も可能です</CAPTION> <TR><TH>カラム１の見出し</TH><TH>カラム２の見出し</TH></TR>
<TR><TD>Ａ</TD><TD>Ｂ</TD></TR>
</TABLE>は、
この表は、<TABLE>タグの説明用です
複数行の表題も可能です
カラム１の見出しカラム２の見出し
ＡＢ
(6) <FRAMESET
　rows="高さリスト"
　cols="幅リスト"
　frameborder="表示有無"
　border="枠幅"
　bordercolor="色"
>
</FRAMESET>

１つのウィンドウを分割して複数のHTMLを表示させる場合の、分割方法を指示するタグです
rows、colsはそれぞれ、縦、横、の分割比率を、ピクセル数、数字と％での割合指定で指示します
分割したいだけ、カンマで区切って指示します
最後の１つは、「*(残り全て)」を指示すると便利です
frameborderは、フレームの境界を表示するか否かを、「yes」、「no」で指示します
borderは、フレームの境界の幅をピクセル値で指示します
bordercolorは、フレームの境界の色を指定します(指定内容は、<BODY>と同じです)
使用例については、<NOFRAMES>のところでまとめて行います
(7) <FRAME
　src="URL"
　name="ウィンドウ名"
　marginwidth="左右マージン"
　marginheight="上下マージン"
　scrolling="スクロールバーの指示"
　noresize
　frameborder="表示有無"
　bordercolor="色"
>

１つのフレームの体裁を指示するタグです
srcは、このフレームで表示するHTML文書のURLを指示します
nameは、このフレームのウィンドウ名称で、<A>タグのtargetで指定する名称と一致する用指示します
marginwidth、marginheightは、それぞれ、フレーム内の左右、上下マージンをピクセル値で指示します
scrollingは、スクロールバーの表示を指示し、「no(なし)」、「yes(あり)」、「auto(自動)」が選択できます
noresizeは、フレームのリサイズを禁止します
frameborderは、フレームの境界を表示するか否かを、「yes」、「no」で指示します
bordercolorは、フレームの境界の色を指定します(指定内容は、<BODY>と同じです)
使用例については、<NOFRAMES>のところでまとめて行います
(8) <NOFRAMES>
</NOFRAMES>

このタグに囲まれた部分は、フレームに対応していないブラウザの場合、表示対象になります
フレームに対応しているブラウザの場合、無視されます
以下は、<FRAMESET><FRAME><NOFRAMES>の使い方の例です

<HTML>
<HEAD>
</HEAD>
<FRAMESET rows="20%,*"frameborder="yes" border="2" bordercolor="#0000ff">
　<FRAMESET cols="60%,*" frameborder="yes">
　　<FRAME src="1-5-sample.html" name="FR1" marginwidth="10" marginheight="10" scrolling="auto">
　　<FRAME src="1-5-sample.html" name="FR2" marginwidth="50" marginheight="50" scrolling="no">
　</FRAMESET>
　<FRAME src="1-5-sample.html" name="FR3" marginwidth="1" marginheight="1" scrolling="yes" noresize>
</FRAMESET>
<NOFRAMES>
<BODY>
<A href="1-5-sample.html">ごめんなさい、フレーム未対応です。ここをクリックすれば、内容はみれます</A>
</BODY>
</NOFRAMES>
</HTML>

FR1FR2
FR3
この例では、ウィンドウを左の様に分けます

FR1はscrollをauto、FR2はno、FR3はyesとしています
FR1とFR2の境界は、移動出来ます
FR1とFR2の境界を、左右に移動し、FR1の横スクロールが出たり、消えたりする事を確認して下さい(scrolling="auto"の作用です)
また、FR1とFR3、または、FR2とFR3の境界が移動出来ない事を確認して下さい(noresizeの作用です)
FR1は、マージンを10、FR2は、50としていますので、表示がずれている事を確認して下さい(marginwidth、marginheightの作用です)

ここをクリックすれば、このフレームがみれます