■テーブルコレクション(角丸テーブル6)■

■ここにテキストが入る
  • 表組を利用してレイアウトしたテーブルテンプレート「テーブルコレクション」です。
  • <TD>タグに背景画像を指定したテーブルを作り、そのなかにコメントを書き込みます。
  • ※ダウンロードファイルにはテーブルを構成する画像とHTML書類が入っています。
  • HTML書類を各自お持ちのテキストエディターで開いてカスタマイズして御利用下さい。
  • ※このテーブルコレクションは背景画像を白にして御利用下さい。
  • 画像を一括でダウンロードできます。
    1. ダウンロード(sit)
    2. ダウンロード(zip)
■解説
  1. 先ず3行3列の表を作成します。 表の枠線( border)とセル同士の間隔(cellspacing)セル内の余白(cellpadding)を0にします。 このテーブルコレクションに使用している画像は横幅が522ピクセルなので表の横幅を522ピクセルに指定します(width)。
  2. <TABLE border="0" cellpadding="0" cellspacing="0"width="522">
    <TR valign="top">
      <TD> </TD><TD> </TD><TD> </TD>
    </TR>
    <TR valign="top">
      <TD> </TD><TD> </TD><TD> </TD>
    </TR>
    <TR valign="top">
      <TD> </TD><TD> </TD><TD> </TD>
    </TR>
    </TABLE>

  3. colspanを使って表の1行目と3行目を1列にします。colspanはセルを列方向につなげる属性です
  4. <TABLE border="0" cellpadding="0" cellspacing="0" width="522">
    <TR valign="top">
      <TD colspan="3"> </TD>
    </TR>
    <TR valign="top">
      <TD> </TD><TD> </TD><TD> </TD>
    </TR>
    <TR valign="top">
      <TD colspan="3"> </TD>
    </TR>
    </TABLE>

  5. 表の1行目と3行目に画像を配置します。このとき画像の横幅(width)と縦幅(height)を必ず指定します。
  6. <TABLE border="0" cellpadding="0" cellspacing="0" width="522">
    <TR valign="top">
      <TD colspan="3">
     <IMG SRC="img/head.gif" width="522" height="20" border="0" >
      </TD>
    </TR>
    <TR valign="top">
      <TD> </TD><TD> </TD><TD> </TD>
    </TR>
    <TR valign="top">
      <TD colspan="3">
      <IMG SRC="img/foot.gif" width="522" height="20" border="0" >
      </TD>
    </TR>
    </TABLE>

  7. 表の2行目の1列と3列のセルに画像を配置するのですが、このとき(3)のようにセル内に配置するのではなくbackgroud属性を使い表の背景画像として画像を指定します。 そして2列目は背景色に1列目と3列目の画像と同じ色をbgcolorで指定します。
  8. <TABLE border="0" cellpadding="0" cellspacing="0" width="522">
    <TR valign="top">
      <TD colspan="3">
    <IMG SRC="img/had.gif" width="522" height="20" border="0" >
      </TD>
    </TR>
    <TR valign="top">
      <TDbackground="img/l_body.gif" width="22"></TD>
      <TD bgcolor="#カラーコード" width="478">ここにテキストが入る</TD>
      <TD background="img/r_body.gif" width="22"></TD>
    </TR>
    <TR valign="top">
      <TD colspan="3">
      <IMG SRC="img/foot.gif" width="522" height="20" border="0" >
      </TD>
    </TR>
    </TABLE>

  • 以上の手順で作成したものが下のサンプルです。(表組が判りやすいように外枠を表示してあります)
■ここにテキストが入る