TABLEの使い方

ここでは、1つのﾃｰﾌﾞﾙに対する基本的な要素を示します。 してください。
1つのﾃｰﾌﾞﾙの記述は、<TABLE>～</TABLE>間の記述で行います。この内容には、大別して次の4種類があります。
① ﾃｰﾌﾞﾙ ﾀｲﾄﾙ部
<CAPTION>～</CAPTION>
② ﾍｯﾀﾞ部
<THEAD>～</THEAD>
③ ﾃﾞｰﾀ部
<TBODY>～</TBODY>
④ ﾌｯﾀ部
<TFOOT>～</TFOOT>
①のﾃｰﾌﾞﾙ ﾀｲﾄﾙ部は、ﾃｰﾌﾞﾙの上側または下側にﾃｰﾌﾞﾙのﾀｲﾄﾙを表示する場合に使用します。②,③,④の各部は、ﾃｰﾌﾞﾙ内の各ｾﾙを行単位でｸﾞﾙｰﾌﾟ化するために用います。この②,③,④の定義は、特に明確な必要性がない場合、省略できます。
②,③,④内の記述は、基本的に共通で、<TR>～</TR>で1行を定義します。1行内には複数のｾﾙが記述できます。1ｾﾙの記述は、<TD>～</TD>か、<TH>～</TH>で行います。これらの内容が実際にｾﾙ内の表示となります。<TH>はﾃﾞﾌｫﾙﾄで、ｾﾙ中央(ALIGN=CENTER)、太字(<B>相当)となります。
次にﾃｰﾌﾞﾙの一般形を示します。
■ TABLEの一般形
結果 記述 (意味)
ﾀｲﾄﾙ
項目A | 項目B | 項目C
ﾃﾞｰﾀA | ﾃﾞｰﾀ1A | ﾃﾞｰﾀ2A
ﾃﾞｰﾀB | ﾃﾞｰﾀ1B | ﾃﾞｰﾀ2B
ﾃﾞｰﾀC | ﾃﾞｰﾀ1C | ﾃﾞｰﾀ2C
項目 | 備考

<TABLE BORDER=3>
ﾃｰﾌﾞﾙ定義開始
<CAPTION><B>ﾀｲﾄﾙ</CAPTION>
ﾀｲﾄﾙ名定義(省略可)
 <THEAD>
ﾍｯﾀﾞ部開始(省略可)
  <TR BGCOLOR=FFFFA0>
ﾍｯﾀﾞ部行開始
   <TH>項目A</TH><TH>項目B</TH><TH>項目C</TH>
ﾍｯﾀﾞ行ｾﾙ内容定義
  </TR>
ﾍｯﾀﾞ部行終了
 </THEAD>
ﾍｯﾀﾞ部終了(省略可)
 <TBODY ALIGN=CENTER BGCOLOR=FFD0FF>
ﾃﾞｰﾀ部開始(省略可)
  <TR>
ﾃﾞｰﾀ行1行目開始
   <TD>ﾃﾞｰﾀA</TD><TD>ﾃﾞｰﾀ1A</TD><TD>ﾃﾞｰﾀ2A</TD>
ﾃﾞｰﾀ行1行目ｾﾙ内容定義
  </TR>
ﾃﾞｰﾀ行1行目終了
  <TR>
ﾃﾞｰﾀ行2行目開始
   <TD>ﾃﾞｰﾀB</TD><TD>ﾃﾞｰﾀ1B</TD><TD>ﾃﾞｰﾀ2B</TD>
ﾃﾞｰﾀ行2行目ｾﾙ内容定義
  </TR>
ﾃﾞｰﾀ行2行目終了
  <TR>
ﾃﾞｰﾀ行3行目開始
   <TD>ﾃﾞｰﾀB</TD><TD>ﾃﾞｰﾀ1B</TD><TD>ﾃﾞｰﾀ2B</TD>
ﾃﾞｰﾀ行3行目ｾﾙ内容定義
  </TR>
ﾃﾞｰﾀ行3行目終了
 </TBODY>
ﾃﾞｰﾀ部終了(省略可)
 <TFOOT ALIGN=CENTER>
ﾌｯﾀ部開始(省略可)
  <TR BGCOLOR=FFFFA0>
ﾌｯﾀ部行開始
   <TD>項目</TD><TD COLSPAN=2>備考</TD>
ﾌｯﾀ行ｾﾙ内容定義
  </TR BGCOLOR=FFFFA0>
ﾌｯﾀ部行終了
 </TFOOT>
ﾌｯﾀ部終了(省略可)
</TABLE>
ﾃｰﾌﾞﾙ定義終了
THEAD, TBODY, TFOOTは、次の<THEAD>, <TBODY>, <TFOOT>や</TABLE>で自動的に定義を終了しますので、この場合の対応する</THEAD>, </TBODY>, </TFOOT>は省略可能です。
ﾃｰﾌﾞﾙ内が1行のみの場合は、<TR>, </TR>が省略可能です。
<TD>, <TH>内に他のﾃｰﾌﾞﾙを記述すること(ﾈｽﾄ)ができます。ﾃｰﾌﾞﾙをﾈｽﾄすることで複雑な構成が記述可能です。
以下にﾃｰﾌﾞﾙで使用される各ｴﾚﾒﾝﾄの一覧を示します。
■ TABLE関係のｴﾚﾒﾝﾄ (以下の茶色の属性値は無指定時のﾃﾞﾌｫﾙﾄ)
記述 意味 備考
<TABLE ALIGN=LEFT BACKGROUND="BG.GIF" BGCOLOR=WHITE BORDER=3
  BORDERCOLOR=BLACK BORDERCOLORDARK=808080 BORDERCOLORLIGHT=C2C2C2
  CELLPADDING=1 CELLSPACING=2 COLS=3
  FRAME=VOID HEIGHT=50% RULES=COLS WIDTH=300>全内容定義</TABLE>
ﾃｰﾌﾞﾙ全体の定義
<CAPTION ALIGN=TOP VALIGN=BOTTOM>ﾀｲﾄﾙ名</CAPTION>
ﾀｲﾄﾙ名定義 ﾃｰﾌﾞﾙ全体の上部か下部にﾀｲﾄﾙを定義します。
<THEAD ALIGN=LEFT BGCOLOR=RED VALIGN=MIDDLE>ﾍｯﾀﾞ部定義</THEAD>
ﾍｯﾀﾞ部の定義 これらの具体的内容は、TR,TD,THで定義します。複数行にわたる定義が可能です。</THEAD>,</TBODY>,</TFOOT>は省略可能です。その場合、次のTBODY, TFOOT, THEAD, /TABLEまでとなります。
<TBODY ALIGN=LEFT BGCOLOR=RED VALIGN=MIDDLE>ﾃﾞｰﾀ部定義</TBODY>
ﾃﾞｰﾀ部の定義
<TFOOT ALIGN=LEFT BGCOLOR=RED VALIGN=MIDDLE>ﾌｯﾀ部定義</TFOOT>
ﾌｯﾀ部の定義
<TR ALIGN=LEFT BGCOLOR=RED BORDERCOLOR=BLACK
  BORDERCOLORDARK=BLUE BORDERCOLORLIGHT=GREEN
  HEIGHT=50 VALIGN=MIDDLE>行の各ｾﾙ定義</TR>
行の定義 具体的内容は、TD, THで定義します。
<TH ALIGN=CENTER BACKGROUND="BG.GIF" BGCOLOR=RED BORDERCOLOR=BLACK
  BORDERCOLORDARK=BLUE BORDERCOLORLIGHT=GREEN COLSPAN=1
  HEIGHT=35 NOWRAP ROWSPAN=1 VALIGN=MIDDLE WIDTH=50%>ﾍｯﾀﾞ･ｾﾙ内容</TH>
ﾍｯﾀﾞ･ｾﾙ定義 ｾﾙ内容を定義します。
TDとの違いはﾃﾞﾌｫﾙﾄで、ALIGN=CENTER、内容に対して<B>(太字)となります。
<TD ALIGN=LEFT BACKGROUND="BG.GIF" BGCOLOR=RED BORDERCOLOR=BLACK
  BORDERCOLORDARK=BLUE BORDERCOLORLIGHT=GREEN COLSPAN=1
  HEIGHT=35 NOWRAP ROWSPAN=1 VALIGN=MIDDLE WIDTH=50%>ｾﾙ内容</TD>
ｾﾙ定義
各属性のﾃﾞﾌｫﾙﾄ値は、そのｴﾚﾒﾝﾄ固有のﾃﾞﾌｫﾙﾄの場合と、関連する他のｴﾚﾒﾝﾄ(通常、そのｴﾚﾒﾝﾄより上位となるｴﾚﾒﾝﾄに存在する同一属性)の影響を受ける場合があります。上記の各属性のﾃﾞﾌｫﾙﾄ値は、関連するｴﾚﾒﾝﾄの属性が無指定時の場合です。特にﾃｰﾌﾞﾙをﾈｽﾄした場合のﾃﾞﾌｫﾙﾄは、大きく異なる場合がありますので、不確実な場合はﾃﾞﾌｫﾙﾄを使用せず、明確に定義する方が無難です。
また、ﾈｽﾄなどにより深い位置に存在するｾﾙに対するHEIGHT, WIDTH属性などは、他のｾﾙの自動調整などの影響を受け、指定値と異なる表示となる場合があります。
次に各ｴﾚﾒﾝﾄに対する属性の一覧を示します。
■ TABLE関係の属性
記述 結果 意味 使用可能
ｴﾚﾒﾝﾄ 		備考
<TABLE>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 枠、背景なし。 基本形
TABLEに対してALIGN=CENTER、TD,TH,TRに対してALIGN=LEFT, VALIGN=MIDDLE
ALIGN, VALIGN属性による変化
<TABLE BORDER>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>ABC
AAA | BBB
CCC | DDD
ABC 		ﾃｰﾌﾞﾙを左側に単独で配置。 TABLE ALIGN定義をしません。
ﾃﾞﾌｫﾙﾄです。
<TABLE BORDER ALIGN=CENTER>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>ABC
AAA | BBB
CCC | DDD
ABC 		ﾃｰﾌﾞﾙを水平方向中央に単独で配置。 左右への流し込みはできません。
<TABLE BORDER ALIGN=LEFT>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>ABC
AAA | BBB
CCC | DDD
ABC 		ﾃｰﾌﾞﾙを左側に配置。 右側に文字などを流し込めます。
<TABLE BORDER ALIGN=RIGHT>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>ABC
AAA | BBB
CCC | DDD
ABC 		ﾃｰﾌﾞﾙを右側に配置。 左側に文字などを流し込めます。
<TABLE BORDER WIDTH=100%>
<TR ALIGN=CENTER><TD>AAA</TD><TD>BBB</TD></TR>
<TR ALIGN=RIGHT><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>ABC
AAA | BBB
CCC | DDD
 1行目の各ｾﾙは水平方向中央、2行目の各ｾﾙは右に配置。 COL
COLGROUP
DIV
H1,H2,H3
H4,H5,H6
HR
P
TD,TH,TR
TBODY
TFOOT
THEAD 		ﾃﾞﾌｫﾙﾄはALIGN=LEFTです。
<TABLE BORDER WIDTH=100%>
<TR><TD>AAA</TD><TD ALIGN=CENTER>BBB</TD></TR>
<TR><TD ALIGN=LEFT>CCC</TD><TD ALIGN=RIGHT>DDD</TD></TR>
</TABLE>ABC
AAA | BBB
CCC | DDD
 BBBをｾﾙ水平方向中央、CCCを左、DDDを右に配置。
<TABLE BORDER>
<TR><TD VALIGN=BASELINE>AAA</TD>
    <TD>BB<SUP><SMALL>2</SMALL></SUP><BR>bbb</TD></TR>
<TR><TD VALIGN=TOP>CCC</TD>
    <TD>DD<SUP><SMALL>2</SMALL></SUP><BR>ddd</TD></TR>
</TABLE>ABC
AAA | BB2 bbb
CCC | DD2 ddd
 AAAをｾﾙ先頭行基準線位置、CCCを上位置に配置。 COL
COLGROUP
TD
TH
TR
TBODY
TFOOT
THEAD 		ﾃﾞﾌｫﾙﾄはVALIGN=MIDDLEです。
上付き文字などが無い場合のBASELINEとTOPは、同じ結果となります。
最終行基準線位置指定はありません。
<TABLE BORDER>
<TR><TD VALIGN=BOTTOM>AAA</TD>
    <TD>BBB<BR>bb<SUB><SMALL>2</SMALL></SUB></TD></TR>
<TR><TD VALIGN=MIDDLE>CCC</TD>
    <TD>DDD<BR>dd<SUB><SMALL>2</SMALL></SUB></TD></TR>
</TABLE>ABC
AAA | BBB bb2
CCC | DDD dd2
 AAAをｾﾙ下位置、CCCを垂直方向中央に配置。
<TABLE BORDER>
<CAPTION ALIGN=CENTER>ﾀｲﾄﾙ</CAPTION>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
ﾀｲﾄﾙ
AAA | BBB
CCC | DDD
 ﾀｲﾄﾙをﾃｰﾌﾞﾙ上部中央にします。 CAPTION ALIGN=TOPでも同様となります。VALIGN=BOTTOMが同時に指定されている場合は、ﾃｰﾌﾞﾙ下部中央になります。
<TABLE BORDER>
<CAPTION ALIGN=LEFT>ﾀｲﾄﾙ</CAPTION>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
ﾀｲﾄﾙ
AAA | BBB
CCC | DDD
 ﾀｲﾄﾙをﾃｰﾌﾞﾙ上部左側にします。 VALIGN=BOTTOMが同時に指定されている場合は、ﾃｰﾌﾞﾙ下部左側になります。
<TABLE BORDER>
<CAPTION ALIGN=RIGHT>ﾀｲﾄﾙ</CAPTION>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
ﾀｲﾄﾙ
AAA | BBB
CCC | DDD
 ﾀｲﾄﾙをﾃｰﾌﾞﾙ上部右側にします。 VALIGN=BOTTOMが同時に指定されている場合は、ﾃｰﾌﾞﾙ下部右側になります。
<TABLE BORDER>
<CAPTION VALIGN=BOTTOM>ﾀｲﾄﾙ</CAPTION>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
ﾀｲﾄﾙ
AAA | BBB
CCC | DDD
 ﾀｲﾄﾙをﾃｰﾌﾞﾙ下部中央にします。 ALIGN=BOTTOMでも同様となります。同時にALIGN=LEFT/RIGHTが指定されている場合は、下部左側/下部右側になります。
<TABLE BORDER>
<CAPTION VALIGN=TOP>ﾀｲﾄﾙ</CAPTION>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
ﾀｲﾄﾙ
AAA | BBB
CCC | DDD
 ﾀｲﾄﾙをﾃｰﾌﾞﾙ上部中央にします。 ALIGN=TOPでも同様となります。同時にALIGN=LEFT/RIGHTが指定されている場合は、上部左側/上部右側になります。
BACKGROUND属性による変化
<TABLE BACKGROUND="..\IMAGE\HHsmp1.GIF">
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 全体の背景画像を指定します。 TABLE
TD
TH 		画像が小さい場合は、連結する形で必要ｻｲｽﾞとします。
<TABLE>
<TR><TD BACKGROUND="..\IMAGE\HHsmp1.GIF">AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 ｾﾙの背景画像を指定します。
BGCOLOR属性による変化
<TABLE BGCOLOR=RED>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 全体に背景色を指定します。 MARQUEE
TABLE
TD
TH
TR
TBODY
TFOOT
THEAD
<TABLE>
<TR BGCOLOR=RED><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 行の全ｾﾙに背景色を指定します。
<TABLE>
<TR><TD BGCOLOR=RED>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 ｾﾙに背景色を指定します。
BORDER属性による変化
<TABLE BORDER>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 枠を1ﾋﾟｸｾﾙで表示します。 IFRAME
IMG
TABLE 		BORDERはBORDER=1と等価です。
内枠は常に1ﾋﾟｸｾﾙです。
<TABLE BORDER=3>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 外枠を3、内枠を1ﾋﾟｸｾﾙで表示します。
BORDERCOLOR関係属性による変化
<TABLE BORDER=3 BORDERCOLOR=RED>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 外枠、内枠の色を指定します。 FRAME
FRAMESET
IFRAME
TABLE
TD
TH
TR
<TABLE BORDER=3 BORDERCOLOR=RED>
<TR BORDERCOLOR=RED><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 行の内枠色を指定します。
<TABLE BORDER=3 BORDERCOLOR=RED>
<TR><TD BORDERCOLOR=RED>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 ｾﾙの内枠色を指定します。
<TABLE BORDER=3 BORDERCOLORLIGHT=RED>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 外枠の左,上と内枠の右,下の色を指定します。 TABLE
TD
TH
TR 		BORDER属性無指定時は無効です。
<TABLE BORDER=3 BORDERCOLORDARK=RED>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 外枠の右,下と内枠の左,上の色を指定します。
CELLPADDING, CELLSPACING属性による変化
<TABLE BORDER CELLPADDING=5>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 全ｾﾙの内枠と文字間の間隔を5ﾋﾟｸｾﾙにします。 TABLE
<TABLE BORDER CELLSPACING=5>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 各ｾﾙ、外枠間の間隔を5ﾋﾟｸｾﾙにします。
FRAME属性による変化
<TABLE BORDER=3 FRAME=ABOVE>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 外側に面する枠の上側のみ表示します。 TABLE
<TABLE BORDER=3 FRAME=BELOW>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 外側に面する枠の下側のみ表示します。
<TABLE BORDER=3 FRAME=HSIDES>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 外側に面する枠の上側と下側のみ表示します。
<TABLE BORDER=3 FRAME=LHS>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 外側に面する枠の左側のみ表示します。
<TABLE BORDER=3 FRAME=RHS>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 外側に面する枠の右側のみ表示します。
<TABLE BORDER=3 FRAME=VOID>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 外側に面する枠を表示しません。
<TABLE BORDER=3 FRAME=VSIDES>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 外側に面する枠の右側と左側のみ表示します。
RULES属性による変化
<TABLE BORDER=3 RULES=COLS>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 列間枠のみ表示します。 TABLE
<TABLE BORDER=3 RULES=GROUPS>
<THEAD><TR><TD>AAA</TD><TD>BBB</TD></TR></THEAD>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 THEAD, TBODY, TFOOT, COLGROUP指定でのｸﾞﾙｰﾌﾟ間の列間枠のみ表示しません。
<TABLE BORDER=3 RULES=NONE>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 内枠の外側のみ表示します。
<TABLE BORDER=3 RULES=ROWS>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 行間枠のみ表示します。
COLS属性による変化
<TABLE BORDER COLS=2>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 ﾃｰﾌﾞﾙ内の列数を指定します。 TABLE 表示上の変化はありません。この指定で表示速度が向上します。
COLSPAN, ROWSPAN属性による変化
<TABLE BORDER>
<TR><TD COLSPAN=2>AAA</TD><TD ROWSPAN=2>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA |  | BBB
CCC | DDD
 AAAのｾﾙを横方向2個分で1ｾﾙ、BBBのｾﾙを縦方向2個分で1ｾﾙとします。 TD
TH 		同一TD, TH内にCOLSPAN, ROWSPAN共に指定ができます。
HEIGHT, WIDTH属性による変化
<TABLE BORDER=3 HEIGHT=75>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 ﾃｰﾌﾞﾙ全体の垂直方向を75ﾋﾟｸｾﾙにします。 EMBED
FRAME
IFRAME
IMG
MARQUEE
OBJECT
TABLE
TD
TH
TR
(TRはHEIGHTのみ) 		値はﾋﾟｸｾﾙか%で指定します。
TD, TH, TRでのHEIGHT指定は、その行全体に影響します。同様にTD, THでのWIDTH指定は、その列全体に影響します。TRでのWIDTH指定は、無視されます。
<TABLE BORDER=3 WIDTH=100%>
<TR><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 ﾃｰﾌﾞﾙ全体の水平方向を100%にします。
<TABLE BORDER=3>
<TR HEIGHT=30><TD>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 行の垂直方向を30ﾋﾟｸｾﾙにします。
<TABLE BORDER=3>
<TR><TD WIDTH=70%>AAA</TD><TD>BBB</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA | BBB
CCC | DDD
 列の水平方向をﾃｰﾌﾞﾙ全体の70%にします。
NOWRAP属性による変化
<TABLE BORDER>
<TR><TD NOWRAP>AAA aa a</TD><TD>BBB bbb</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA aa a | BBB bbb
CCC | DDD
 ｾﾙ内文字列のﾜｰﾄﾞﾗｯﾌﾟ(自動改行)を禁止します。 TD
TH 		次のNOBRでも同様な結果となります。
<TABLE BORDER>
<TR><TD><NOBR>AAA aa</NOBR> a</TD><TD>BBB bbb</TD></TR>
<TR><TD>CCC</TD><TD>DDD</TD></TR>
</TABLE>
AAA aa a | BBB bbb
CCC | DDD
 ｾﾙ内文字列の改行を禁止します。 参考 <NOBR>, </NOBR>でｾﾙ内の特定部分の改行禁止が可能です。


TABLEのﾈｽﾄ

ﾃｰﾌﾞﾙはﾈｽﾄすることで、複雑な表作成や構成が行えます。実使用におけるﾈｽﾄ数制限はありませんが、ﾈｽﾄが深くなると表示開始までの時間が遅くなります。同様にｾﾙ数が増えるとやはり遅くなります。これらを考慮して、できるだけ簡単な記述となるようなﾈｽﾄや構成を考えます。
ﾈｽﾄを行う場合の注意点として、属性のﾃﾞﾌｫﾙﾄ値とHEIGHT, WIDTH属性値の扱いがあります。属性のﾃﾞﾌｫﾙﾄ値は、他のｴﾚﾒﾝﾄから影響を受けるものがあります。この場合、親となるﾃｰﾌﾞﾙの影響を受ける属性が存在しますので、このような場合は明確に属性を定義します。
ﾈｽﾄが深いHEIGHT, WIDTH属性は、正しく表示されません。このような場合の多くの原因は、他の無指定ｾﾙからの値と矛盾する状態となる場合がほとんどです。このような場合には、できるだけ外側のｾﾙで大きさを指定します。HEIGHT属性の場合は、<TR>内で、WIDTH属性の場合は、先頭行の各ｾﾙで指定します。
次の例では、COLSPAN, ROWSPAN属性を使用することでも実現できますが、ﾃｰﾌﾞﾙのﾈｽﾄの方が簡素な構造となり、より作成し易くなります。

■ TABLEのﾈｽﾄ例
結果 記述 (意味)
名称 | 項目A | 項目B
項目1 | 値1A | 値1B
項目2 | 値2A | 値2B
項目3 | 値3A | 値3B
項目4 値4A 値4B
4B-1 | 説明文章1
4B-2 | 説明文章2
4B-3 | 説明文章3
4B-4 | 説明文章4

<TABLE BORDER=3 CELLPADDING=0>
ﾃｰﾌﾞﾙ定義開始
 <TBODY BGCOLOR=FFD0FF ALIGN=CENTER>
全ｾﾙ共通定義
  <TR BGCOLOR=FFFFA0>
列項目行定義開始
   <TH>名称</TH><TH>項目A</TH><TH>項目B</TH>
列項目行内容定義
  </TR>
列項目行定義終了
  <TR>
1行目ﾃﾞｰﾀ定義開始
   <TD BGCOLOR=D0FFD0>項目1</TD><TD>値1A</TD><TD>値1B</TD>
1行目ﾃﾞｰﾀ内容定義
  </TR>
1行目ﾃﾞｰﾀ定義終了
  <TR>
2行目ﾃﾞｰﾀ定義開始
   <TD BGCOLOR=D0FFD0>項目2</TD><TD>値2A</TD><TD>値2B</TD>
2行目ﾃﾞｰﾀ内容定義
  </TR>
2行目ﾃﾞｰﾀ定義終了
  <TR>
3行目ﾃﾞｰﾀ定義開始
   <TD BGCOLOR=D0FFD0>項目3</TD><TD>値3A</TD><TD>値3B</TD>
3行目ﾃﾞｰﾀ内容定義
  </TR>
3行目ﾃﾞｰﾀ定義終了
  <TR>
4行目ﾃﾞｰﾀ定義開始
   <TD BGCOLOR=D0FFD0>項目4</TD><TD>値4A</TD><TD>値4B
4行目ﾃﾞｰﾀ内容定義開始
    <TABLE BORDER=1 CELLSPACING=0 FRAME=ABOVE>
内部ﾃｰﾌﾞﾙ定義開始
     <TBODY BGCOLOR=FFE0D0>
内部ｾﾙ共通定義
      <TR>
内部1行目ﾃﾞｰﾀ定義開始
       <TD BGCOLOR=A0FFA0>4B-1</TD><TD>説明文章1</TD>
内部1行目ﾃﾞｰﾀ内容定義
      </TR>
内部1行目ﾃﾞｰﾀ定義終了
      <TR>
内部2行目ﾃﾞｰﾀ定義開始
       <TD BGCOLOR=A0FFA0>4B-2</TD><TD>説明文章2</TD>
内部1行目ﾃﾞｰﾀ内容定義
      </TR>
内部2行目ﾃﾞｰﾀ定義終了
      <TR>
内部3行目ﾃﾞｰﾀ定義開始
       <TD BGCOLOR=A0FFA0>4B-3</TD><TD>説明文章3</TD>
内部1行目ﾃﾞｰﾀ内容定義
      </TR>
内部3行目ﾃﾞｰﾀ定義終了
      <TR>
内部4行目ﾃﾞｰﾀ定義開始
       <TD BGCOLOR=A0FFA0>4B-4</TD><TD>説明文章4</TD>
内部1行目ﾃﾞｰﾀ内容定義
      </TR>
内部4行目ﾃﾞｰﾀ定義終了
    </TABLE>
内部ﾃｰﾌﾞﾙ定義終了
   </TD>
4行目ﾃﾞｰﾀ内容定義終了
  </TR>
4行目ﾃﾞｰﾀ定義終了
</TABLE>
ﾃｰﾌﾞﾙ定義終了


TABLEの3D化

TABLEのBORDERCOLORDARK, BORDERCOLORLIGHT属性を使用し、ﾃｰﾌﾞﾙのﾈｽﾄを併用することで、ﾃｰﾌﾞﾙ全体を3D化することができます。基本的には、BORDERCOLORDARK, BORDERCOLORLIGHT属性で陰影を作成しますが、凹凸を上手く組み合わせることで視覚上の効果を狙います。

■ TABLEの3D化例
結果 記述 (意味)
何とかｺﾝﾄﾛｰﾗ
START STOP PAUSE
開始
停止
一時停止
CHANNEL
ABCD
EFGH
IJKL
MNOP
<TABLE BGCOLOR=C0C0C0 BORDER=3 CELLSPACING=3>
ﾃｰﾌﾞﾙ定義開始
 <TBODY  ALIGN=CENTER>
全ｾﾙ共通定義
  <TR><TD COLSPAN=3>
ﾀｲﾄﾙ行定義開始
    <TABLE BGCOLOR=FFFFA0 BORDER=3 BORDERCOLORDARK=E0E0E0 BORDERCOLORLIGHT=808080 WIDTH=100%>
ﾀｲﾄﾙ部ﾃｰﾌﾞﾙ定義開始
      <TH>何とかｺﾝﾄﾛｰﾗ</TH></TABLE></TD></TR>
ﾀｲﾄﾙ内容定義
  <TR BORDERCOLOR=E0E0E0><TD>START</TD><TD>STOP</TD><TD>PAUSE</TD></TR>
START,STOP,PAUSE表示定義
  <TR>
ﾎﾞﾀﾝ定義開始
   <TD><TABLE BGCOLOR=B0FFB0 BORDER=3 WIDTH=100%><TH>開始</TH></TABLE></TD>
開始ﾎﾞﾀﾝ定義
   <TD><TABLE BGCOLOR=FFB0B0 BORDER=3 WIDTH=100%><TH>停止</TH></TABLE></TD>
停止ﾎﾞﾀﾝ定義
   <TD><TABLE BGCOLOR=FFC0B0 BORDER=3 WIDTH=100%><TH><NOBR>一</NOBR>時<NOBR>停止</TH></TABLE></TD>
一時停止ﾎﾞﾀﾝ定義
  <TR><TD COLSPAN=2>
ﾃﾞｨｽﾌﾟﾚｲ部定義開始
   <TABLE BGCOLOR=80E0E0 BORDER=5 BORDERCOLORDARK=D8D8D8 BORDERCOLORLIGHT=808080 HEIGHT=84 WIDTH=100%>
ﾃﾞｨｽﾌﾟﾚｲ部定義
    <TD BORDERCOLOR=80E0E0></TD></TABLE></TD>
   <TD><PRE>CHANNNEL
CHANNEL定義
    <TABLE BORDER=1 CELLSPACING=0 WIDTH=100%>
ﾁｬﾈﾙ部ﾃｰﾌﾞﾙ定義
     <TBODY ALIGN=CENTER BGCOLOR=0>
ﾁｬﾈﾙ部ﾃｰﾌﾞﾙ、ｾﾙ共通定義
      <TR><TD BGCOLOR=C0C0C0>
ﾁｬﾈﾙABCD部定義開始
        <TABLE BGCOLOR=C0C0C0 BORDER=3 CELLPADDING=0 WIDTH=100%><TH></TH></TABLE></TD>
ﾁｬﾈﾙABCDﾎﾞﾀﾝ定義
       <TD><PRE><FONT COLOR=WHITE>ABCD</TD></TR>
ﾁｬﾈﾙABCD表示定義
      <TR><TD BGCOLOR=C0C0C0>
ﾁｬﾈﾙEFGH部定義開始
        <TABLE BGCOLOR=C0C0C0 BORDER=3 CELLPADDING=0 WIDTH=100%><TH></TH></TABLE></TD>
ﾁｬﾈﾙEFGHﾎﾞﾀﾝ定義
       <TD><PRE><FONT COLOR=WHITE>EFGH</TD></TR>
ﾁｬﾈﾙEFGH表示定義
      <TR><TD BGCOLOR=C0C0C0>
ﾁｬﾈﾙIJKL部定義開始
        <TABLE BGCOLOR=C0C0C0 BORDER=3 CELLPADDING=0 WIDTH=100%><TH></TH></TABLE></TD>
ﾁｬﾈﾙIJKLﾎﾞﾀﾝ定義
       <TD><PRE><FONT COLOR=WHITE>IJKL</TD></TR>
ﾁｬﾈﾙIJKL表示定義
      <TR><TD BGCOLOR=C0C0C0>
ﾁｬﾈﾙMNOP部定義開始
        <TABLE BGCOLOR=C0C0C0 BORDER=3 CELLPADDING=0 WIDTH=100%><TH></TH></TABLE></TD>
ﾁｬﾈﾙMNOPﾎﾞﾀﾝ定義
       <TD><PRE><FONT COLOR=WHITE>MNOP</TD></TR>
ﾁｬﾈﾙMNOP表示定義
    </TABLE></TD></TR>
ﾁｬﾈﾙ部ﾃｰﾌﾞﾙ定義終了
</TABLE>
ﾃｰﾌﾞﾙ定義終了


TABLEによるﾚｲｱｳﾄ作成

表示ｻｲｽﾞが固定されている画面を作成する場合には、あまり問題とならないのですが、ﾌﾞﾗｳｻﾞによるﾘｻｲｽﾞに対応した可変画面を作成する場合、ｻｲｽﾞ変更による画面ﾚｲｱｳﾄの保持が問題となります。特に凝った画面構成とした場合に、一部のずれが全体に与える影響が大きくなります。このようなずれを回避する手段としてTABLEが利用できます。
ﾃｰﾌﾞﾙ内の各ｾﾙを各構成要素として定義することで、ｾﾙ位置(構成要素位置)を固定化できます。各構成要素は1画面を作成する要領で作成が可能となり、他の要素からの影響を排除できます。
各構成要素の大きさの比率を保つ場合には、HEIGHT, WIDTH属性値を%で指定します。固定的に扱う構成要素はﾋﾟｸｾﾙ値で指定します。
■ TABLEによるﾚｲｱｳﾄ例
結果 記述 (意味)
注意 見易さのためにﾎﾞｰﾀﾞｰと背景色を表示しています。
本文1
画像A | 説明A | 画像B
画像C | 説明B
 | 説明C
本文2 |  | 補足

<TABLE HEIGHT=200 WIDTH=100%>
ﾃｰﾌﾞﾙ定義開始
 <TR HEIGHT=25%>
本文1定義開始(高さ指定)
  <TD COLSPAN=3>本文1</TD>
本文1内容定義
 </TR>
本文1定義終了
 <TR>
画像A,説明A,画像B定義開始
  <TD>画像A</TD><TD>説明A</TD><TD ROWSPAN=2>画像B</TD>
画像A,説明A,画像B内容定義
 </TR>
画像A,説明A,画像B定義終了
 <TR>
画像C,説明B定義開始
  <TD ROWSPAN=2>画像C</TD><TD>説明B</TD>
画像C,説明B内容定義
 </TR>
画像C,説明B定義終了
 <TR>
説明C定義開始
  <TD COLSPAN=2>説明C</TD>
説明C内容定義
 </TR>
説明C定義終了
 <TR HEIGHT=25%>
本文2,補足定義開始(高さ指定)
  <TD COLSPAN=2>本文2</TD><TD>補足</TD>
本文2,補足内容定義
 </TR>
本文2,補足定義終了
</TABLE>
ﾃｰﾌﾞﾙ定義終了


TABLE関係のﾋﾝﾄ

ﾃｰﾌﾞﾙに関係するﾋﾝﾄを次に示します。

■ 特定行間ｽﾍﾟｰｽの調整について
■ 特定列間ｽﾍﾟｰｽの調整について
■ ｾﾙ内の<PRE>での行端の空白について

■ 特定行間ｽﾍﾟｰｽの調整について

 特定の行間ｽﾍﾟｰｽを空け見易くするには、<TR></TR>を目的の行間に挿入することで行えます。<TR></TR>は1組で現在の行間ｽﾍﾟｰｽ分となります。必要な間隔分の数を挿入します。
この調整を細かく行うには、CELLSPACING属性値を小さく設定する必要があります。
表示結果 記述
項目行1
項目行2
項目行3
項目行4
項目行5
<TABLE BORDER CELLSPACING=1>
ﾃｰﾌﾞﾙ定義開始
 <TBODY BGCOLOR=A0FFFF>
全ｾﾙ背景色定義
  <TR><TD>項目行1</TD></TR>
第1行定義
  <TR><TD>項目行2</TD></TR>
第2行定義
  <TR></TR>
第2～3行間隔補正(1+1=2ﾋﾟｸｾﾙ)
  <TR><TD>項目行3</TD></TR>
第3行定義
  <TR></TR><TR></TR>
第3～4行間隔補正(1+2=3ﾋﾟｸｾﾙ)
  <TR><TD>項目行4</TD></TR>
第4行定義
  <TR></TR><TR></TR><TR></TR>
第4～5行間隔補正(1+3=4ﾋﾟｸｾﾙ)
  <TR><TD>項目行5</TD></TR>
第5行定義
</TABLE>
ﾃｰﾌﾞﾙ定義終了

■ 特定列間ｽﾍﾟｰｽの調整について

 特定の列間ｽﾍﾟｰｽを空け見易くするには、<TD></TD>を目的の行間に挿入することで行えます。<TD></TD>は1組で現在のCELLSPACING属性値×2＋CELLPADDING属性値×2＋1(ﾋﾟｸｾﾙ)となります。必要な間隔分の数を挿入します。
注意しなければならないのは、CELLPADDING属性値が0以外の場合、その値ﾋﾟｸｾﾙ分がｾﾙのBGCOLOR属性値で描画されることです。多くの場合、挿入するTDにBGCOLOR属性値を指定することで、この問題を回避することができます。
この問題を避けるには、CELLPADDING属性値を0にする必要があります。
表示結果 記述
項目1 項目2 項目3 項目4
<TABLE BORDER CELLPADDING=0 CELLSPACING=1>
ﾃｰﾌﾞﾙ定義開始
 <TBODY BGCOLOR=A0FFFF>
全ｾﾙ背景色定義
  <TR>
行定義開始
   <TD>項目1</TD>
第1列定義
   <TD>項目2</TD>
第2列定義
   <TD></TD>
第2～3列間隔補正(2+0+1=3ﾋﾟｸｾﾙ)
   <TD>項目3</TD>
第3列定義
   <TD></TD><TD></TD>
第3～4列間隔補正(4+0+2=6ﾋﾟｸｾﾙ)
   <TD>項目4</TD>
第4列定義
  </TR>
行定義終了
</TABLE>
ﾃｰﾌﾞﾙ定義終了
参考 CELLPADDING=0以外時
項目1 項目2 項目3 項目4
<TABLE BORDER CELLPADDING=1 CELLSPACING=1>
CELLPADDING=1時
項目1 項目2 項目3 項目4
<TD BGCOLOR=WHITE></TD>
列間隔補正のTDにBGCOLOR=WHITE追加

■ ｾﾙ内の<PRE>での行端の空白について

 ﾃｰﾌﾞﾙのｾﾙ内で<PRE>で文字を記述すると、行端に空白が挿入されてしまいます。このためにALIGN=RIGHT指定でもｾﾙ右端とならないなど、ｾﾙ内の位置関係に支障をきたす場合があります。
この場合には、行端に<BR>を記述することで解決できます。
条件 表示 結果 記述
 ALIGN=LEFT
なし AAA ○
<TD ALIGN=LEFT>ABC</TD>
<PRE>
ABC
○
<TD ALIGN=LEFT><PRE>ABC</TD>
<PRE>～<BR>
ABC
○
<TD ALIGN=LEFT><PRE>ABC<BR></TD>
 ALIGN=CENTER
なし ABC ○
<TD ALIGN=CENTER>ABC</TD>
<PRE>
ABC
×
<TD ALIGN=CENTER><PRE>ABC</TD>
<PRE>～<BR>
ABC
○
<TD ALIGN=CENTER><PRE>ABC<BR></TD>
 ALIGN=RIGHT
なし AAA ○
<TD ALIGN=RIGHT>ABC</TD>
<PRE>
ABC
×
<TD ALIGN=RIGHT><PRE>ABC</TD>
<PRE>～<BR>
ABC
○
<TD ALIGN=RIGHT><PRE>ABC<BR></TD>
基準ｾﾙ幅作成用


IMGの使い方

ここでは、1つのｲﾒｰｼﾞ(画像)に対する基本的な要素を示します。
ｲﾒｰｼﾞの記述は、<IMG>ﾀｸﾞの記述で行います。ｲﾒｰｼﾞ内にﾎｯﾄｽﾎﾟｯﾄを設定して他の場所へﾘﾝｸすることができます。これらｲﾒｰｼﾞ関係で使用するﾀｸﾞを次に示します。
ﾀｸﾞ 使用目的
<IMG>
ｲﾒｰｼﾞ(画像)表示
<AREA>
ｲﾒｰｼﾞ内のﾎｯﾄｽﾎﾟｯﾄ領域定義
<MAP>～</MAP>
ﾎｯﾄｽﾎﾟｯﾄ領域群の定義
単純にｲﾒｰｼﾞ画像を表示するだけの場合は、<IMG>ﾀｸﾞのSRC属性で対象の画像ﾌｧｲﾙ名を指定するのみで実現できます。画像ﾌｧｲﾙ形式は、BMP, GIF, JPEG, PNGなどが指定可能です。
ｲﾒｰｼﾞ画像内をｸﾘｯｸすることで特定の位置へﾘﾝｸする場合には、<AREA>ﾀｸﾞでｲﾒｰｼﾞ画像内のﾎｯﾄｽﾎﾟｯﾄ領域を定義し、これらを<MAP>～</MAP>で囲み、ﾎｯﾄｽﾎﾟｯﾄ ﾏｯﾌﾟを作成する必要があります。<MAP>ﾀｸﾞのNAME属性値がこのﾏｯﾌﾟの名前となり、<IMG>ﾀｸﾞのUSEMAP属性値で指定されます。このために<IMG>ﾀｸﾞと<MAP>ﾀｸﾞとの記述上の位置関係は無関係となります。
次にｲﾒｰｼﾞの一般形を示します。
■ ｲﾒｰｼﾞ表示の一般形
結果 記述 (意味)
下の画像内の左右2ヶ所にﾎｯﾄｽﾎﾟｯﾄを定義しています。ｸﾘｯｸしてみてください。

<IMG SRC=(このﾌｧｲﾙ基準のﾊﾟｽ\)画像ﾌｧｲﾙ名 USEMAP=#ﾏｯﾌﾟ名>
ｲﾒｰｼﾞ画像定義
<MAP NAME=ﾏｯﾌﾟ名>
ﾎｯﾄｽﾎﾟｯﾄ ﾏｯﾌﾟ定義開始
 <AREA COORDS=0,0,18,27 HREF=ﾘﾝｸ先名>
ﾎｯﾄｽﾎﾟｯﾄ1領域定義
 <AREA COORDS=19,0,37,27 HREF=ﾘﾝｸ先名>
ﾎｯﾄｽﾎﾟｯﾄ2領域定義
</MAP>
ﾎｯﾄｽﾎﾟｯﾄ ﾏｯﾌﾟ定義終了
上記一般形のようにｲﾒｰｼﾞ画像にﾘﾝｸを設定すると、画像の外周がﾃﾞﾌｫﾙﾄで青枠となります。<IMG>ﾀｸﾞ内でもBORDER属性を指定すると外枠を表示できます。
ﾎｯﾄｽﾎﾟｯﾄ領域の形状は矩形とは限りません。<AREA>ﾀｸﾞ内のSHAPE属性で形状を指定できます。
これらを含む各属性などは、以下を参照してください。
■ ｲﾒｰｼﾞ関係のｴﾚﾒﾝﾄ (以下の茶色の属性値は無指定時のﾃﾞﾌｫﾙﾄ)
記述 意味 備考
<IMG ALIGN=LEFT BORDER=3 DYNSRC="ﾋﾞﾃﾞｵ･ｸﾘｯﾌﾟ･ﾌｧｲﾙ名" HEIGHT=100 HSPACE=0
  LOOP=1 SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名" USEMAP="#ﾏｯﾌﾟ名" VSPACE=0 WIDTH=200>
ｲﾒｰｼﾞ画像定義 ｲﾒｰｼﾞ画像/映像を定義します。USEMAP属性値のﾏｯﾌﾟ名で示すﾎｯﾄｽﾎﾟｯﾄでﾘﾝｸが可能です。
<MAP NAME="ﾏｯﾌﾟ名">ﾎｯﾄｽﾎﾟｯﾄ定義</MAP>
ﾎｯﾄｽﾎﾟｯﾄ･ﾏｯﾌﾟ定義 ﾎｯﾄｽﾎﾟｯﾄは<AREA>ﾀｸﾞで定義します。
<AREA COORDS=0,0,20,30 HREF="ﾘﾝｸ先ﾄﾋﾟｯｸ/URL名" SHAPE=RECT TARGET="_self">
ﾎｯﾄｽﾎﾟｯﾄ領域定義 1つのﾎｯﾄｽﾎﾟｯﾄ領域を定義します。
各属性のﾃﾞﾌｫﾙﾄ値は、そのｴﾚﾒﾝﾄ固有のﾃﾞﾌｫﾙﾄの場合と、関連する他のｴﾚﾒﾝﾄ(通常、そのｴﾚﾒﾝﾄより上位となるｴﾚﾒﾝﾄに存在する同一属性)の影響を受ける場合があります。上記の各属性のﾃﾞﾌｫﾙﾄ値は、関連するｴﾚﾒﾝﾄの属性が無指定時の場合です。特にﾃｰﾌﾞﾙなどでﾈｽﾄした内側の場合は、大きく異なる場合がありますので、不確実な場合はﾃﾞﾌｫﾙﾄを使用せず、明確に定義する方が無難です。
次に各ｴﾚﾒﾝﾄに対する属性の一覧を示します。結果欄内でｲﾒｰｼﾞ領域を明確に示す必要のある場合、赤枠で表示していますが、実際の記述では存在(表示)しません。
■ IMG関係の属性
記述 結果 意味 備考
IMG関係属性
SRC属性
<IMG SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
枠、背景なし。 基本形
ﾌｧｲﾙ名は、このﾌｧｲﾙを基準に相対ﾊﾟｽで指定します。
ALIGN属性
ABC
<IMG ALIGN=BASELINE SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
DEF<BR>GHIJKL
ABC [image] DEF
GHIJKL 		現在の行基準線位置に配置。 文字列内で揃えることができます。
ABC
<IMG ALIGN=BOTTOM SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
DEF<BR>GHI
ABC [image] DEF
GHI 		現在の下側位置に配置。
ABC
<IMG ALIGN=LEFT SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
DEF
ABC [image] DEF 左側に配置。 ALIGN属性なしと同一で、ﾃﾞﾌｫﾙﾄです。
ABC
<IMG ALIGN=MIDDLE SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
DEF
ABC [image] DEF 縦方向中央に配置。
ABC
<IMG ALIGN=RIGHT SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
DEF
ABC [image] DEF 右側に配置。
ABC
<IMG ALIGN=TEXTTOP SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
DEF
ABC [image] DEF ｲﾒｰｼﾞ上部を先頭行に合せて配置。 文字列と上部で揃えることができます。
ABC
<IMG ALIGN=TOP SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
DEF
ABC [image] DEF 物理的上部に配置。
BORDER属性
<IMG BORDER SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
外枠は表示されません。 無指定時、BORDER=0と同等です。
<IMG BORDER=5 SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
指定ﾋﾟｸｾﾙ幅の外枠を黒で表示します。 属性値はﾋﾟｸｾﾙです。
DYNSRC, LOOP属性
<IMG DYNSRC="ﾋﾞﾃﾞｵ･ｸﾘｯﾌﾟ･ﾌｧｲﾙ名" LOOP=-1>
DYNSRC属性がﾋﾞﾃﾞｵ･ｸﾘｯﾌﾟを再生します。
LOOP属性が繰り返し回数を指定します。 無限繰り返しには-1を指定します。
無指定時は1となります。
HEIGHT, WIDTH属性
<IMG HEIGHT=40 SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
ｲﾒｰｼﾞのｻｲｽﾞを縦ｻｲｽﾞで指定します。 指定値はﾋﾟｸｾﾙです。
一方のみの指定では、指定値に対して縦横ともに拡大/縮小されます。
<IMG WIDTH=54 SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
ｲﾒｰｼﾞのｻｲｽﾞを横ｻｲｽﾞで指定します。
<IMG HEIGHT=40 WIDTH=65 SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
ｲﾒｰｼﾞのｻｲｽﾞを変更します。 縦横比を変更するには、両方の指定が必要です。
HSPACE, VSPACE属性
<IMG HSPACE=10 SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
左右方向余白を設定します。 指定値はﾋﾟｸｾﾙです。(結果欄の赤枠は結果表示用で実際には表示されません。)
<IMG VSPACE=10 SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名">
上下方向余白を設定します。
USEMAP属性
<IMG SRC="ｲﾒｰｼﾞ･ﾌｧｲﾙ名" USEMAP=#ﾏｯﾌﾟ名>
ﾎｯﾄｽﾎﾟｯﾄ･ﾏｯﾌﾟを指定します。 対応するﾎｯﾄｽﾎﾟｯﾄ･ﾏｯﾌﾟが必要です。
MAP関係属性
NAME属性
<MAP NAME=ﾏｯﾌﾟ名>ﾎｯﾄｽﾎﾟｯﾄ定義群</MAP>
ﾎｯﾄｽﾎﾟｯﾄ･ﾏｯﾌﾟ名を定義します。 これを<IMG>ﾀｸﾞのUSEMAP属性で指定します。
AREA関係属性
COORDS, SHAPE属性
<AREA COORDS=0,0,18,27 HREF=ﾘﾝｸ先名>
左上が0,0で、左X, 上Y, 右X, 下Yの順で記述します。
値はﾋﾟｸｾﾙです。 		矩形領域ﾎｯﾄｽﾎﾟｯﾄ時の場合です。SHAPE属性がRECT, RECTANGLEか、なし時。
<AREA COORDS=18,14,13 HREF=ﾘﾝｸ先名 SHAPE=CIRCLE>
左上が0,0で、円中心のX, Y, 半径の順で記述します。
値はﾋﾟｸｾﾙです。 		円形領域ﾎｯﾄｽﾎﾟｯﾄ時の場合です。SHAPE属性がCIRCかCIRCLE時。
<AREA COORDS=18,0,4,26,33,26 HREF=ﾘﾝｸ先名 SHAPE=POLYGON>
左上が0,0で、ﾉｰﾄﾞはX, Yの順で、必要なﾉｰﾄﾞ数分、続けて記述します。
値はﾋﾟｸｾﾙです。 		多角形領域ﾎｯﾄｽﾎﾟｯﾄ時の場合(例は三角形)です。SHAPE属性がPOLYかPOLYGON時。
HREF属性
<AREA COORDS=0,0,18,27 HREF=ﾘﾝｸ先名>
ﾘﾝｸ先のﾄﾋﾟｯｸ/URL名を指定します。 通常、(このﾌｧｲﾙ基準の)ﾊﾟｽ\ﾌｧｲﾙ名.HTM#<A NAME=～>で指定した～が一般形となります。
TARGET属性
<AREA COORDS=0,0,18,27 HREF=ﾘﾝｸ先名 TARGET=_blank>
ﾘﾝｸ先のｳｨﾝﾄﾞｳやﾌﾚｰﾑを指定します。 無指定時は、現在のｳｨﾝﾄﾞｳが使用されます。


ActiveX

ActiveXｺﾝﾄﾛｰﾙを使用すると、様々な機能を追加することができます。次にActiveXｺﾝﾄﾛｰﾙのｺﾏﾝﾄﾞと主な機能を示します。基本的にCHM形式のHTML HELPﾌｧｲﾙ用ですが、単独のHTMLﾌｧｲﾙでも機能するｺﾏﾝﾄﾞがあります。

■ ｺﾏﾝﾄﾞの種類
ｺﾏﾝﾄﾞ | 主な機能 | 単独HTMLﾌｧｲﾙでの動作
ALink | ALink名を含むﾄﾋﾟｯｸのﾘｽﾄをﾎﾟｯﾌﾟｱｯﾌﾟして、選択されたﾄﾋﾟｯｸを表示します。 | ×
Close | 現在表示中のｳｨﾝﾄﾞｳを閉じます。 | ×
Contents | 目次をﾅﾋﾞｹﾞｰｼｮﾝ ﾍﾟｲﾝのようにﾂﾘｰ構造で表示します。 | ○
HH Version | HTML Help ActiveXｺﾝﾄﾛｰﾙ(Hhctrl.ocx)のﾊﾞｰｼﾞｮﾝを表示します。 | ○
Index | 索引をﾅﾋﾞｹﾞｰｼｮﾝ ﾍﾟｲﾝのように表示します。 | ○
KLink | ｷｰﾜｰﾄﾞを含むﾄﾋﾟｯｸのﾘｽﾄをﾎﾟｯﾌﾟｱｯﾌﾟして、選択されたﾄﾋﾟｯｸを表示します。 | ×
Relted Topics | 指定したﾘｽﾄをﾎﾟｯﾌﾟｱｯﾌﾟして、選択されたﾄﾋﾟｯｸを表示します。 | ○
Shortcut | ｼｮｰﾄｶｯﾄ動作(他のﾌﾟﾛｸﾞﾗﾑの起動など)をします。 | ×
Splash | ﾌｧｲﾙが開かれた時に一定時間ｲﾒｰｼﾞ ﾌｧｲﾙを表示します。 | ○
TCard | ﾄﾚｰﾆﾝｸﾞ ｶｰﾄﾞに対応する動作をします。 | ×
WinHelp | 標準ﾍﾙﾌﾟ形式(.hlp)のｳｨﾝﾄﾞｳにﾄﾋﾟｯｸを表示します。 | ×

ActiveXｺﾝﾄﾛｰﾙの記述には、OBJECTﾀｸﾞとPARAMﾀｸﾞを使用します。代表的な一般形を次に示します。


ActiveX ALink

作成中


ActiveX Close

作成中


ActiveX Contents

作成中


ActiveX HH Version

作成中


ActiveX Index

作成中


ActiveX KLink

作成中


ActiveX Related Topics

Related Topicsｺﾏﾝﾄﾞを使用すると、通常のﾘﾝｸと異なり、複数のﾘﾝｸ先のﾘｽﾄをﾎﾟｯﾌﾟｱｯﾌﾟさせて目的のﾘﾝｸ先を選択することができます。
以下に例を示しますが、記述欄の赤文字は表示形式、ﾘｽﾄ内容などにより変更となる部分を示します。ｵﾌﾞｼﾞｪｸﾄ名(ID=での指定)は、他のｵﾌﾞｼﾞｪｸﾄ名と重ならないようにします。
■ Related Topicsの例
形式 表示結果 記述 (意味)
標準ﾎﾞﾀﾝによるﾒﾆｭｰ
<OBJECT
ｵﾌﾞｼﾞｪｸﾄ定義開始
 ALIGN=CENTER
ｵﾌﾞｼﾞｪｸﾄ位置定義
 ID=Button-Menu
ｵﾌﾞｼﾞｪｸﾄ名定義
 TYPE="application/x-oleobject"
種別Activeｺﾝﾄﾛｰﾙ(固定)
 CLASSID="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11"
ActiveXｸﾗｽID(固定)
 CODEBASE="Hhctrl.ocx#Version=4,72,8252,0">
ActiveX制御ﾓｼﾞｭｰﾙ(基本的に固定)
<PARAM name="Command" value="Related Topics,MENU">①
ﾒﾆｭｰ形式Related Topicｺﾏﾝﾄﾞ指定
<PARAM name="Button" value="Text:ここをｸﾘｯｸ">②
ﾎﾞﾀﾝ形式、文字列指定
<PARAM name="Font" value="ＭＳ Ｐゴシック,,,,,BOLD">
文字ﾌｫﾝﾄなど指定(省略可)
<PARAM name="Item1" value="TABLEのﾈｽﾄについて;ﾘﾝｸ先ﾌｧｲﾙ/URL名">
ﾘｽﾄ第1項目定義
<PARAM name="Item2" value="TABLEの3D化について;ﾘﾝｸ先ﾌｧｲﾙ/URL名">
ﾘｽﾄ第2項目定義
<PARAM name="Item3" value="TABLEでのﾚｲｱｳﾄ作成;ﾘﾝｸ先ﾌｧｲﾙ/URL名">
ﾘｽﾄ第3項目定義
<PARAM name="Item4" value="TABLE関係のﾋﾝﾄ;ﾘﾝｸ先ﾌｧｲﾙ/URL名">
ﾘｽﾄ第4項目定義
</OBJECT>
ｵﾌﾞｼﾞｪｸﾄ定義終了
ﾀﾞｲｱﾛｸﾞ形式の場合
<PARAM name="Command" value="Related Topics, DIALOG">
上記①行を左の記述に変更
ｼｮｰﾄｶｯﾄ ﾎﾞﾀﾝ形式の場合
<PARAM name="Button" value="Bitmap:Shortcut">
上記②行を左の記述に変更
BMPﾌｧｲﾙを使用したﾎﾞﾀﾝ形式の場合
<PARAM name="Button" value="Bitmap:(このﾌｧｲﾙ基準のﾊﾟｽ\)ﾌｧｲﾙ名.bmp">
上記②行を左の記述に変更
ｱｲｺﾝ ﾌｧｲﾙを使用したﾎﾞﾀﾝ形式の場合
<PARAM name="Button" value="Bitmap:(このﾌｧｲﾙ基準のﾊﾟｽ\)ﾌｧｲﾙ名.ICO">
上記②行を左の記述に変更
文字列形式の場合
<PARAM name="Text" value="Text:文字列">
上記②行を左の記述に変更
標準ｼｮｰﾄｶｯﾄ ﾎﾞﾀﾝによるﾀﾞｲｱﾛｸﾞ
BMPﾌｧｲﾙのﾎﾞﾀﾝによるﾒﾆｭｰ
ｱｲｺﾝ ﾌｧｲﾙのﾎﾞﾀﾝによるﾀﾞｲｱﾛｸﾞ
文字列によるﾒﾆｭｰ


ActiveX Shortcut

作成中


ActiveX Splash

作成中


ActiveX TCard

作成中


ActiveX WinHelp

作成中