TABLE - みる会図書館


検索対象: HTMLデザイン辞典
41件見つかりました。

1. HTMLデザイン辞典

め、表示完了までに時間がかかってしまうことがありますので注意して くたさい。このときのプラウザの画面は表示途中で一瞬フラッシュした ような感じになります TABLE WIDTH CELL SPACING CELL SPACING - 画 のま TABLE BORDER TD 工 EIG 工 T CELL PADDING レイアウト TABLE 工 EIG 工 T TABLE BORDER TABLE'TR,'TD BGCOLOR BODY BGCOLO 日が透ける く TD> やく TR> タグの BGCOLOR 属性は通常、図のようにセルの内側にのみ背景色を 施します。これをく TABLE > タグの属性にしてテーブル全体に背景色を施した場合、 Netscape Navigator では同じようにセルの内部にだけに色が付きますが、 lnternet Explorer では CELLSPACING と BORDER の部分にも色が付きます。また BGCOLOR 属性は Netscape Navigator2.0 以下では無効となります。 071 HTML DES I GNS

2. HTMLデザイン辞典

く TR> く TD>—く TD><TR> く TR > く TD > ~ く TD > く TR > く TR > く TD > ~ く TD > く TR > <TR> く TD>—<TD><TR> く TR > く TD > ~ く TD > く TR > く TR > く TD > ~ < TD > < TR > <TR> く TD>—<TD><TR> <TR> く TD>—<TD><TR> <TR><TD>—<TD> く TR> く TR > く TD > ~ く TD > く TR > く TR > く TD > ~ < TD > く TR > < TR > く TD > ~ く TD > く TR > <TR><TD>—<TD> く TR> く TR > く TD > ~ く TD > く TR > く TR><TD>—<TD><TR> くT日> く TD>—く TD><TR> <TR> く TD>—<TD><TR> く TR><TD>—く TD> く TR> くT日> く TD>—く TD> く TR> く TR><TD>—<TD><TR> く TR> く TD>—く TD> く TR> <TR><TD>—く TD> く TR> く TR><TD>—く TD><TR> <T 日 ><TD>—<TD> く TR> <TR><TD>—<TD> く TR> <TR><TD>—く TD> く TR> く TR><TD>—く TD> く TR> く TR><TD>—<TD><TR> <TR><TD>—く TD><TR> く TR><TD>—<TD> く TR> <TR><TD>—<TD> く TR> <TR> く TD>—<TD><TR> く TR><TD>—<TD> く TR> <TR><TD>—く TD> く TR> く TR > く TD > ~ く TD > く TR > く TR><TD>—<TD> く TR> ■テーフルのサイス指定を行う テープルをあらかじめ正確に寸法指定しておくことでも、ページレイアウ トのスピードを速くすることができます。個々の <TD> タグの WIDTH や HEIGHT 、その合計である全体のく TABLE > の WIDTH やⅡ EIGHT 属性を 正しく設定することで、プラウザはその数値を優先してレイアウトを行い ます。 気を付けなければいけないのは、それらの数値に矛盾があったり、内容物 がセルの指定値より大きかったりすると、かえって逆効果になってしまう ということです。例えば幅 200 ピクセルを指定したく TD > セルの中に幅 240 ピクセルの画像を入れ込むと、プラウザは一度レンダリングしたものを再 度レンダリングし直して、画像がセルに納まるように描き直します。この とき、プラウザ上にページが一瞬表示された後、再度描き直すために画面 がフラッシュしたような現象が起きてしまうことがあります。この結果レ イアウト完了までにより多くの時間がかかってしまいます。 ・属性指定を省略する タグの属性の値には、特に記入しなくても有効になる値 ( = デフォルト値 ) があります。例えば、く TD > タグの ALIGN のデフォルト値は LEFT 、 VALIGN のデフォルト値は MIDDLE なので、これらの値の場合はわざわざ HTML として書く必要はありません。 下記の例では手の画像をく TD > セルの左側中央に寄せていますが、 <TD> タグの ALIGN 、 VALIGN 属性の記述を取り除いても表示結果は変わりません。 <TABLE> —<TABLE> く TABLE> —<TABLE> く TABLE> ~ く TABLE> <TABLE> ~ く TABLE> <TABLE> ~ く TABLE> チューンナップ 223 HTML DES GNS

3. HTMLデザイン辞典

SOURCE く H T M L > く H E A D > く T I T L E >Table く / T I T L E > く / H E A D > く B 0 D Y B G C 0 L 0 R = " #FFFFFF " > <TABLE BGCOLOR="#FFCCOO" WIDTH=200 HEIGHT=200 BORDER=O C E L L P A D D I N G =0> 《 T R > <TD ALIGN=LEFTVALIGN=MIDDLE> く IMG SRC="hand. gif" W I D T H = 100 HEIGHT=60></TD> </TABLE> く / B 0 D Y > く / H T M L > 06 チューンナップ DISP し ロ日 Table 0 、 0 民る進む 中止 ホームおに入リ 理検 匚ローカーレマシンソ - ン 224 HTML DESIGNS

4. HTMLデザイン辞典

S 0 リ C E く H T M L > く H E A D > く T I T L E >Table く / T I T L E > く / H E A D > く BODY BGCOLOR = " # 669900 " TEXT="#FFFFFF" LINK="#FFFFOO" ALINK="#FFCCOO" VLINK="#FFFFOO"> <TABLE WIDTH=540 BORDER=I CELLSPACING=O CELLPADDING=O> <TR> <TD COLSPAN=2 WIDTH=540 HEIGHT=80>&nbsp;</TD> <TR> <TD WIDTH=170 HEIGHT=300 VALIGN=TOP>&nbsp;</TD> <TD WIDTH=370 HEIGHT=300 VALIGN=TOP>&nbsp;</TD> </TABLE> く / B 0 D Y > く / H T M L > 03 レイアウト DISP し ロ Netscape: Table ホ - ム 検をガイド 画読み込み 印刷 セキエリティ 倍止 民る 空のセルの BORDER を表示した状態。この段階では、セル内が完全に空の状態 だと境界線が見えないため、非改行スペースをダミーとして入れています。 *. - DES I GNS 062

5. HTMLデザイン辞典

く FORM > タグで隙間ができる 料 0 t 2 フォームの開始宣言を行う <FORM> タグと、フォームを終了するための </FORM> タグは、たた宣言を行うためたけのタグであるにもかかわらず、 Netscape Navigato 「と te 「 netExp 「 e 「 3 上で画面上に余計な余白とな って画面上に現れることがあります。この現象を回避するためには、や や強引な方法ですが <FO R M> タグをく BO DY> タグの外に出してみたり、 <TABLE>"V</TABLE> タグ内の <TABLE> とく TR > の間や、 <TR> と <TD> の間なと、コンテンツに直接関係ない部分に移動させると、この無駄な スペースが表示されなくなります。 HTML の記述としてはかなり不自然 なものになってしまいますが、フォームの動作上は特に問題はないよう です。たたし使用には充分なテストを行ってくたさい。 レイアウト 105 HTML DESIGNS

6. HTMLデザイン辞典

<TR BGCOLOR="#FFCCOO"> <TD>CELL NO. 2-1 く / TD> <TD>CELL NO. 2-2 く / TD> <TR BGCOLOR="#FFCCOO"> <TD>CELL No. 3-1 く / TD 》 <TD>CELL NO. 3-2 く / TD 》 </TABLE> く !ー 内側のテーブル終了 </TABLE> く / B 0 D Y > く / H T M L > 03 レイアウト DISPLAV ロ Table 日ロ RDER す、 0 0 0 ロ 0 0 事 民る 進む 中止 C E LL N o. 0 -1 C E LL N ロ -1 C E LL N o, 1-1 C E LL N o. 1-2 C E LL N o, 2 -1 C E LL N 2 - 2 C E LL N o. 3 -1 C E LL N o, 3 - 2 匚ローカルマシンソーン ァーブルを入れ子にすることで黒い単色の罫線のように見せます。 090 HTML DESIGNS

7. HTMLデザイン辞典

H E I G H T = 61 > 《 / T D 》 </TABLE> く / B 0 D Y > く / H T M L > DISPLAV 団日 ロ —Fu11 Screen Tab1e ホームおに入リ 更新 / 戻る 進む 中止 03 レ イ ア ウ ト Enter 匚ロ - カルマシンリ - ン ロ 00 A △、昌曰 0 理検自スカ拡大小プリントメ - ル初期設定 ホ - ム おに入リ 戻る 甦む中止 ー Fu11 Screen Table= Enter ロ - カルマシンジ - ン ウインドウをどのようなサイズに変更しても画像は常にウインドウの中心に表示されます。 081 HTML DESIGNS

8. HTMLデザイン辞典

■属性のグループ指定 <TABLE> タグや <TR > タグでは、テープル全体や行全体の属性をまとめ て指定することができます。下記のソースでは、全てのく TD > 内で重複し て指定している ALIGN=CENTER 、 VALIGN=BOTTOM 、 BGCOLOR 属 性を <TR > の属性としてまとめることが可能です。また <TABLE> 内で設 定している属性 CELLSPACING=2 はデフォルト値であるため、この記述は 省略しても CELLSPACING は 2 となります。 こういったチェックを行うことで HTML をより簡潔で軽いものにすること ができます。下記の例はやや極端ですが、 HTML を細かくチェックしてみ ると意外とこのような重複記述が含まれているものです。 SOURCE 変更前 ( 554 バイト ) く H T M L > く H E A D > く T I T L E >Table く / T I T L E > く / H E A D > く B 0 D Y B G C 0 L 0 R = " #FFFFFF " > く T A B L E W I D T H = 514 H E I G H T = 104 B 0 R D E R = 0 C E L L P A D D I N G = 0 C E L L S P A C I N G = 2 > <TR> <TD WIDTH=IOO HEIGHT=IOO ALIGN=CENTER VALIGN=BOTTOM BGCOLOR="#FF9900">1</TD> <TD WIDTH=IOO HEIGHT=IOO ALIGN=CENTER VALIGN=BOTTOM BGCOLOR = " # FF9900 " 》 2 く / TD 》 <T D W I D T H = 1 0 0 H E I G H T = 1 0 0 A L I G N = CENTER V A L I G N = BOTTOM BGCOLOR="#FF9900">3</TD> <TD WIDTH=IOO HEIGHT=IOO ALIGN=CENTER VALIGN=BOTTOM BGCOLOR="#FF9900">4</TD> 《 T D W I D T H = 1 0 0 H E I G H T = 1 0 0 A L I G N =C ENTER VA L I G N =BOTTOM BGCOLOR="#FF9900">5</TD> </TABLE> く / B 0 D Y > く / H T M L > チューンナップ HTML DESIGNS

9. HTMLデザイン辞典

ロ table. html <HTML><HERO><TITLE>Table</TITLE></HERO><BOOY BG 〔 OLOR = 凵 h i te> <TRBLE UIOTH=514 HEIGHT=164 L410TH=314 BOROER=O CELLPROOING=B><TR 日 6 〔 OLOR = # FFgg 日 RLIGN= CENTER URLIGN=BOTTOM> <TO UIDTH=188 HEIGHT=19 〉 1 く /TO> <TO L410TH=180 HEIGHT=100>2</TD> く TD L410TH=168 HEIGHT= の 3 く / TO 〉く TO UIOTH=188 HEIGHT=108>4</TO><TO UIOTH= 1 HEIGHT=188>5</TO> く /TR></TRBLE> 前項 ( p. 225 ) での HTML を圧縮してみました ( 335 バイト ) 。記述が無く てもとりあえず問題の発生しないタグイ BODY > やイ HTML > まで省略され ています。圧縮時に消去するタグの種類は設定によりカスタマイズも可 能です 構造や内容によりやむを得ず容量の大きくなってしまうようなファイル などにはかなり効果的だと思われます。 ◇ VSE HTML Turbo http://vse-online.com/ チューンナップ HTML DES I GNS

10. HTMLデザイン辞典

し A 0 U T Microsoft lnternet ExpIorer テーブルの境界線を単色 にする : 3.0 以上 9 3.0 以上 0 3.0 以上 : 3.0 以上 Macintosh テープルの境界線を表示するための <TABLE BORDER> 属性は通常、ど のような幅であっても立体風の罫線として表示されてしまい、印象として はやや画一的な感じがします。これをもっとスッキリとした単色の罫線と して見せるには、テープルをもうひとつのテープルで囲み、入れ子状態に することで可能になります。 Netscape Communicator 03 レイアウト ロ日 Tab1e 日ロ RDER おに入リ検 ロ 0 0 イ 0 0 民る 進む 更新 中止 C E LL N o, ロ -1 ( : E LL N o. ロ -1 C E LL N o. 1-2 C E LL N 61-1 C E LL N 2 -1 C E LL N 0, 2 - 2 C E LL N 3 -1 C E LL N 3 - 2 ロロ - カルマシンゾ - ン く TABLE BORDER> による立体的な境界線 088 H TML DES I GNS