Table Lesson=テーブル枠の仕組み

テーブル枠の構成は、色々な作り方がなされていますが、当サイトで、『ダブルスクェアー』、と 名付けた、掲示板にも適している方法を説明いたします。
1. 【枠テーブル】と、【中身テーブル】、の2つのテーブルから構成されています。
2. 【中身テーブル】は簡単に済ませるのであれば省略しても良いのですが、枠テーブルの第5番目のtd,/tdセル中に入れるテーブルで、 その中に文字や絵などを自由に複雑に設定できる中身の部分です。
3. 【枠テーブル】は、九つのセル部分から構成され、それらは決められた とおりに設定しないと、例えばブラウザにより正しく表示されません。
   

   SAMPLE TABLE ここが本文、テーブルの中身となります。 s

   ⇒は、分解すると こうなります。

   セル番号 01 02 03 04 05 このtd,/tdの間に もう一つの中身テーブル が入ります。 06 07 08 09

4. 画像パーツを、枠テーブルセルの順番通りに、画像指定《img src=》、背景画像指定《background=》 とで交互に設定していきます。
   

   セル番号	01	02	03	04	05	06	07	08	09
   画像番号	01.gif	02.gif	03.gif	04.gif	05.gif 不要	06.gif	07.gif	08.gif	09.gif
   画像指定タグ	img src=	background=	img src=	background=	不要	background=	img src=	background=	img src=
   注意点	ここの画像の大きさで、 枠の太さが決まります。	セル内空欄不可	ここの画像の大きさで、 枠の太さが決まります。	セル内空欄不可	中身	セル内空欄不可	ここの画像の大きさで、 枠の太さが決まります。	セル内空欄不可	ここの画像の大きさで、 枠の太さが決まります。

   (背景画像を指定する部分の画像は、タイル状に表示されるのを想定したデザインにする必要が有ります。しかし直線だけで構成される様なデザインの場合は、《img src=　width=》タグで、 引き伸ばしていいかも知れません。)
   
   
5. ポイント。〜『セル2』の設定！
   
   
   • 《セル内空欄不可》のところへはspace,<br>,<img src=space.gif width=1 height=1>(透明1pix)などの*ダミー を設定します。
   • テーブル横幅をある固定値とするには、セル2の《td width=》を設定します。
   • テーブル横幅を％表示とするには、《table width=%》を設定して、セル2は、《td width=100%》と設定します。
   • ヒント！、セル2の中のダミー画像の《width=》を《ある固定値》に指定します。すると、 《table width=%》表示にしていてウィンドーを 狭くしても《ある設定値》以下は絶対テーブル幅は狭くはならず、 文字の余計な自動リターンもせず、変に縦長にならずに済みます。つまり、ウィンドーを一杯に広げたら、 それなりにテーブル幅はバランスをとり広がり、 ウィンドーを狭くすると、ある程度以上テーブル横幅は狭くならずバランスを保つ、、、という、 賢いテーブルが出来上がるというわけです。
   
   
6. ちなみに上記のSAMPLE TABLEは、およそ次の様なタグで構成されています。
   
   <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 align=center width=120 >
   <TR> <TD><IMG SRC="01.gif" WIDTH=14 HEIGHT=14></TD>　 セル01
   <TD background="02.gif" width=100%> セル02
   <!-- テーブル全体の横幅を%で表示しているとき、 テーブル幅の最小値はこのスペーサーの《WIDTH=》で決めます。 -->
   <IMG SRC="images/space.gif" WIDTH=150 HEIGHT=1></TD>
   <TD><IMG SRC="03.gif" WIDTH=14 HEIGHT=14></TD> セル03
   </TR> <TR>
   <TD height=50 background="04.gif"> セル04
   <BR>
   </TD> <TD align=center bgcolor=#C8D2EF> セル05
   <TABLE BORDER=0 CELLPADDING=20 CELLSPACING=2 WIDTH=100% height=100% ALIGN=CENTER>
   <tr><td align=center nowrap>
   ここが本文、<br>テーブルの中身となります。
   </td></tr></TABLE>
   </TD>
   <TD background="06.gif"> セル06
   <BR></TD>
   </TR> <TR> <TD><IMG SRC="07.gif" WIDTH=14 HEIGHT=14></TD> セル07
   <TD background="08.gif"> セル08
   <BR></TD>
   <TD><IMG SRC="09.gif" WIDTH=14 HEIGHT=14></TD> セル09
   </TR> </TABLE>