Next Home  Prev
No,
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--年--月--日--時--分--秒/スポンサー広告 /コメント:- /トラックバック:-/▲ページトップへ戻る
No,218 comment 0
以前はTABLEタグを使ってホームページを作ったこともありましたが、近年はDIVタグを使うことがほとんどなんです。
ところが
既存のショッピングカートをウインドウサイズに合わせたものにしようと思ったら、TABLEの中にTABLE、またその中にTABLEまたその中にもTABLEと際限なくTABLEが作られていて参りました。

私も作ったことは有るので解るのですが、作るときは割と簡単なのですよね。できているTABLEのTDの中にTABLEを入れていけばいいのですから。

でもそれを改造しようとしたら本当に訳が分かりません。

DIVタグの方は一々名前がついているのでわかりやすいですよね。

そこで改めてTABLEを組んで必要なものを入れ込んでいくことにしました。

<table style="border:0px solid #ccc; width:100%; max-width:600px;margin-left : auto;margin-right : auto">
<tr>
<TD style="border:1px solid #ccc; width:20%;valign:top;" bgcolor="#DCF3F7">1水色</TD>
<TD style="border:1px solid #ccc; width:80%;valign:top;" bgcolor="#FFFFFF">2白</TD>
</tr>
<tr>
<TD style="border:1px solid #ccc; width:20%;valign:top;" bgcolor="#DCF3F7">3水色</TD>
<TD style="border:1px solid #ccc; width:80%;valign:top;" bgcolor="#FFFFFF">4白</TD>
</tr>
</table>

TABLEの幅は
「width:100%; 」 としますが、どんな大きなパソコンでも目いっぱいというと見ずらいということもありますので、そんな時は
一番大きなサイズを指定しておきます。ここでは600pxです。
「max-width:600px」
そして左右からの割合を指定し真ん中に来るように
「margin-left : auto;margin-right : auto」
とします。

追記にDEMOがあります。
ウインドウの幅を狭めると小さくなっていきます。









1水色2白
3水色4白

2015年01月07日20時28分37秒/table /コメント:0 /トラックバック:-/▲ページトップへ戻る

コメント


コメント index
    絵文字

    非公開コメント

    Next Home  Prev


    どりーみー

    カテゴリー

    recent comment

    最新の記事

    月別アーカイブ

    recent trackback

    ブログ内検索

    RSSフィード

    *最新記事のRSS
    *最新コメントのRSS
    *最新トラックバックのRSS

    TB_People

    カレンダー

    12 | 2019/01 | 02
    - - 1 2 3 4 5
    6 7 8 9 10 11 12
    13 14 15 16 17 18 19
    20 21 22 23 24 25 26
    27 28 29 30 31 - -

    ブロとも一覧

    ブロとも申請フォーム

    この人とブロともになる

    リンク

     

    カテゴリー

    recent comment

    最新の記事

    月別アーカイブ

    recent trackback

    ブログ内検索

    RSSフィード

    *最新記事のRSS
    *最新コメントのRSS
    *最新トラックバックのRSS

    TB_People

    カレンダー

    12 | 2019/01 | 02
    - - 1 2 3 4 5
    6 7 8 9 10 11 12
    13 14 15 16 17 18 19
    20 21 22 23 24 25 26
    27 28 29 30 31 - -

    ブロとも一覧

    ブロとも申請フォーム

    この人とブロともになる

    リンク

     

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。