| ■Top |
| ■ テーブルの枠の調整 |
文中のｉｅはインターネットエクスプローラを、ｎｓはネットスケープを示します。
古いブラウザでしかサポートされていないもの、マイナーなものは除外しました。 テーブルの枠の属性は TABLE タグのなかで指定できます。 数値や色の指定には、指定値を " "でくくったほうが無難です。
■Top |
||||||||||||||||||||||||||||||||||||||||||||||||||
BGCOLOR=RED(ie4) 
BGCOLOR=RED(ns4) 
ie4 の場合 
ns4 の場合
BORDERCOLORDARK=RED
BORDERCOLORLIGHT=BLUE| ■ テーブルの背景に画像を使うとき |
ｉｅ４、ｎｓ４からテーブルのなかに背景イメージを貼れるようになりました。 しかしこれまたお約束のように、両ブラウザで見え方が異なりますので注意が必要です。 両者の違いがいちばんよくわかるのは、「テーブルの中にテーブルを入れ、背景イメージを指定したとき」でしょう。  ie4 の場合  ns4 の場合 上のサンプルは、テーブル１にだけ背景を貼り、テーブル２の背景色を白に指定しています。 ｉｅ４ではねらった通りに表示されますが、ｎｓ４ではうまくゆきません。背景色の指定が無視されてしまいます。  ie4 の場合  ns4 の場合 今度は別の背景を貼ってみましょう。 すると、ｎｓでは背景色が無視されるだけではなく、入れ子のテーブルの中にまで左端から背景イメージが貼られてしまうことがわかります。これはデザインを考える上で非常に困った仕様です。 ■このバグの回避法 まず適当なサイズの単色の GIF ファイルを用意し、その色そのもので透過処理しておきます。つまり背景に貼っても透けるだけで何の変化もないような素材を用意するわけです。 次にそのイメージを 内側のTable 2 の背景イメージに指定します。こうすることでｎｓでも Table 2 にこのイメージが使われますが、透明化されているために BGCOLOR= で指定してある背景色だけが表示され、結果としてｉｅ４で見るデザインと同じものが表示されます。下は実際に表示させているものですが、うまく見えているでしょうか？(見えるのはテーブルの背景イメージに対応したブラウザのみです)
|
||
この html のサンプルソース <TABLE background="bg02.gif" width="116" height="100" border="1" cellspacing="2" cellpadding="4"> <TR> <TD> <B>Table 1</B><BR> <TABLE background="dummy.gif" width="100" height="100" border="1" cellspacing="2" cellpadding="4"> <TR> <TD bgcolor="#FFFFFF"> <B>Table 2</B> </TD> </TR> </TABLE> </TD> </TR> </TABLE> ■Top |
| ■ テーブル項目のアレンジ・行と列の連結 |
たいていの参考書に書いてありますが、項目のアレンジの方法です。 ごく普通にテーブルを書けば、下のように均等な区分けになります。
次はテーブルの項目をタテ・ヨコに連結させた例です。
ヨコの項目を連結させるには COLSPAN=(連結する数) を、タテの項目を連結させるには
ROWSPAN=(連結する数) を <TD> のなかで指定します。
上の例では、グリーンの部分の横３つをつなげて一つにしますので、グリーン部分の最初の<TD> に COLSPAN="3" を指定し、これにより一番左の項目が横に３つ分伸びますので残りの▲部分の <TD>〜</TD> は削除します。 そして黄色の部分はタテ２つを連結するので、黄色の最初の <TD> に ROWSPAN="2" を指定し、そのすぐ下の ▲部分にあたる <TD>〜</TD> は削除します。 これのソースを下に示します。緑文字はコメントですので、実際には書きません。 <TABLE border="1"> <TR bgcolor="#99CC99" align="CENTER"> ↓グレー部分。ここは３連結なので TD ひとつに COLSPAN 指定↓ <TD colspan="3">タイトル </TD> </TR> ↓２段目。普通の項目が３つ↓ <TR> <TD>見出し１</TD> <TD>項目１</TD> <TD>項目２</TD> </TR> <TR> ↓黄色部分１。最初の項目に ROWSPAN でタテに連結指定↓ <TD BGCOLOR="#ffcc00" rowspan="2">見出し２</TD><TD>項目１</TD><TD>項目２</TD></TR> <TR> ↓黄色部分２。最初の位置に上から伸びた TD が来るので、項目はふたつだけ指定↓ (ここに上から伸びた TD がくる)<TD>項目１</TD><TD>項目２</TD></TR> </TABLE> ■Top |
|||||||||||||||||||||||
| ■ テーブルを画面いっぱいにセットしたい！ |
|
ほとんどのブラウザでは、 <TABLE width="100%">
としても幅いっぱいにくっついてくれません。これはまあ仕様ということです。
■Topこれをぴったりにレイアウトするには、 BODY タグに次のオプションを指定します。 <BODY TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0"> TOPMARGIN と MARGINHEIGHT はｉｅとネットスケープ４それぞれ向けの指定です。同時に指定してください。これで上下左右ぴったりに表示されますが、古いブラウザでは無視されます。 →テーブル２へ |
| Ushikai and Icons Room |