HTML TIPS    戻る Top
<IMG> <TABLE> <FORM>
<IMG> タグ 戻る
  ・画像ファイルを表示する。
    width と height を省略すると、表示時に自動調整される。
    src に、CGI を指定して、アクセスカウンタ表示などにも使用できます。

<IMG src="../images/taisyouike.gif" align="left" width="96" height="32" border="0" alt="文字">

    src="../images/taisyouike.gif"
          |_ 画像への URL

    align="left"
         |_ テキストとの配置
            left  : 画像が左、その右にテキスト
            right : 画像が右、その左にテキスト

    width="96" height="32"
      |          |
      |          |_画像の高さ (ピクセル)
      |
      |_画像の幅 (ピクセル)

     border="0" alt="文字">
          |       |_ 画像が表示されるまでの間に見える文字
          |
          |_ 0     : 枠なし
             1以上 : (枠の太さ)


  ・lowsrc= では、容量の少ないプレロード画像を指定できる。
    2 段階表示である。

<IMG src="..images/taisyouike.gif" lowsrc="../omages/taisyouike_s.gif">
          |                             |_ プレロードする軽い画像
          |_ 本ロードする画像
<TABLE> タグ 戻る
  ・格子状のテーブルを作成する。
    たいへん便利なのだが、テーブルは全データがセットされてから一気に表示
    される。あまり大きいテーブルは、恐ろしく表示に時間が必要となる。
    テーブルのサイズ指定でも絶対値指定は避けた方が良い。

<TABLE>
  <TBODY>
    <TR>
      <TD>1-1 データ</TD>
      <TD>1-2 データ</TD>
    </TR>
    <TR>
      <TD>2-1 データ</TD>
      <TD>2-2 データ</TD>
    </TR>
  </TBODY>
</TABLE>

<TABLE width="100%" border="0" cellPadding="3" cellSpacing="0">
              |             |_ 境界線なし
              |_ ブラウザ幅 100% にテーブルを表示
                 省略すると、可変幅になる

<TABLE width="100%" border="1" bordercolordark="White" bordercolorlight="#97846a" cellPadding="2" cellSpacing="0">
                            |  |_______________________|_ 盛り上がりタイプ
                            |_ 境界線あり

<TABLE width="100%" bgcolor="#97846a" border="0" cellPadding="3" cellSpacing="2">
                            |                 |_ 境界線なし (フラットタイプ)
                            |_ 背景カラー

<TR bgcolor="#97846a">
             |_ 行カラー

<TD bgcolor="#97846a">
             |_ セルカラー

<TD nowrap>
    |
    |_ ワードラップ禁止

<TD colspan="2">
             |_ セル結合数(横)

<TD rowspan="2">
             |_ セル結合数(縦)
<FORM> タグ 戻る

  ・CGI プログラムへの入力フォームとしてよく使用する。
    テキスト入力項目、選択項目、サブミットボタンなどの部品がある。

<FORM action="mail_form.cgi" id="FORM1" method="post" NAME="FORM1">
  <INPUT TYPE="hidden" NAME="re" VALUE="0">
  お名前 
  <INPUT id="text1" NAME="text1" type="text" size="22" maxlength="40" value="ゲスト"><BR>
  選択 
  <SELECT id="select1" name="select1">
    <OPTION value="01" selected>01</OPTION>
    <OPTION value="02">02</OPTION>
  </SELECT><BR>
  <INPUT id=submit1 NAME=submit1 type=submit value="  発言  "> 
  <INPUT id=reset1 NAME=reset1 type=reset value="リセット">
</FORM>

<FORM action="mail_form.cgi" id="FORM1" method="post" NAME="FORM1">
              |_ submit ボタンで呼び出す CGI プログラム

<INPUT TYPE="hidden" NAME="re" VALUE="0">
             |             |          |_ 固定値
             |             |_ CGI プログラムで識別する項目名
             |_ hidden は、非表示項目

<INPUT id="text1" NAME="text1" type="text" size="22" maxlength="40" value="ゲスト">
                        |            |           |              |          |_ 初期値
                        |            |           |              |_ 最大文字数
                        |            |           |_ テキストボックスの幅
                        |            |_ テキスト入力項目
                        |_ CGI プログラムで識別する項目名

<SELECT id="select1" name="select1">
                           |_ CGI プログラムで識別する項目名

<OPTION value="01" selected>01</OPTION>
               |   |        |_ 選択項目名
               |   |_ 選択状態
               |_ CGI に渡す値

<INPUT id=submit1 NAME=submit1 type=submit value="  発言  ">
                                    |             |_ ボタンキャプション
                                    |_ サブミットボタン

<INPUT id=reset1 NAME=reset1 type=reset value="リセット">
                                  |            |_ ボタンキャプション
                                  |_ リセットボタン
戻る Top
Copyright© 2004-2006 N.Misumi All right reserved.