• 締切済み
  • 困ってます

Tableとdivタグで、レイアウト

Tableとdivタグで、画像のようなレイアウトを作りたいのですが。 黒い線を二本入れた簡単なレイアウトなのですが、 どのブラウザーで見ても、(どの画面の大きさで見ても) 同じような形になるように、tableとdivでレイアウトするにはどうしたらよいでしょうか。 metaタグなど余計なものは書かなくてもかまいませんのでよろしくおねがいします。 (後パーセンテージもいくつでも構いません、適当に書きました) tableで書いた場合と、divで書いた場合と教えてください。 縦横ともに長さ100%で表示したいです。 パーセンテージを使うとかける気がするのですが、忘れてしまいました。 ぜひよろしくお願いします。

共感・応援の気持ちを伝えよう!

  • 回答数2
  • 閲覧数226
  • ありがとう数1

みんなの回答

  • 回答No.2

こんにちは 大まかですがこんな感じでしょうか。 Htmlタグ <body> <div id="top"> <div id="top-left"> <!--top-left--></div> <div id="top-space"> <!--top-space--></div> <div id="top-right"> <!--top-right--></div> <!-- top --></div> <div id="bottom"> <div id="bottom-left"> <!--bottom-left--></div> <div id="bottom-space"> <!--bottom-space--></div> <div id="bottom-right"> <!--bottom-right--></div> <!--bottom--></div> </body> CSS * { margin: 0px; padding: 0px; } body, html { margin: 2% 0%; padding: 0px; width: 100%; height: 96%; background-color: black; } #wrapper{ margin: 0px; padding: 0px; width: 100%; height: 100%; } #top { margin: 0px; padding: 0px; height: 70%; } #top-left { margin: 0px; height: 90%; width: 65%; float: left; background-color: white; } #top-space { margin: 0px; width: 5%; height: 100%; float: left; } #top-right { margin: 0px; height: 90%; width: 30%; float: left; padding-bottom: 0px; background-color: white; } #bottom { margin: 0px; padding: 0px; height: 28%; } #bottom-left { margin: 0px; height: 100%; width: 65%; float: left; background-color: white; } #bottom-space { margin: 0px; width: 5%; height: 100%; float: left; } #bottom-right { margin: 0px; height: 100%; width: 30%; float: left; background-color: white; } %は適当ですのでお好みで。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • <table>について教えてください。

    最近まで<table>を使用しそして、CSSでtext-alignを使ってレイアウトしていたのですが、最近<table>を使ってやるのがあまりよくないと本に書かれていたのですが。なぜでしょうか。 <table>タグを使わないのであれば、どのようにレイアウトを組んでゆけばいいのでしょうか。<div>タグで区切っていきCSSのpositionで指定するのでしょうか。 よろしくおねがいします。

    • ベストアンサー
    • HTML
  • htmlのtableレイアウトについて

    こんばんは。訳あってcssとテーブルの両方のレイアウト手法を用いた サイト作りをしています。準初心者です。 昔から受け継がれてきたサークルのサイトの更新担当をしているのですが、 テーブルレイアウトとcssレイアウトがごちゃまぜで、わけの分からないスペーサーgifなど も多用されていたりと、悲惨な有様なので、必死に修復しているところです。 テーブルレイアウトとで組まれていても、今回は抜本的な対策は留保するつもりで書いていた のですが、ある問題に突き当たりました。 divタグ内のtableタグによって作られた1×1の表ボックスが更新情報欄になっていて、 ページの左端に隙間無くくっついているようなレイアウトにしようと試みました。 <TABLE style=" border:0px;padding:0px;margin:0px;・・とするとdivのブロック要素と テーブルが完全にくっついた状態にできると思い実践してみたのですが、どうしても何pxかの隙間が生じてしまうのです。試行錯誤の末、もとのソースコードではtable要素にhtmlでwidth="400" と指定されていたものをtableタグ内に <TABLE style=" border:0px;padding:0px;margin:0px;  width:400px;> と指定し直した結果、計らずしもこの隙間は無くなりました。 そこで疑問なのですが、なぜこのような結果になったのでしょうか、ご教授ください!

    • 締切済み
    • CSS
  • html の divとtable の役割

    html の初心者です。 divで箱を作って、画面のレイアウトをしている人が多いようですが、 僕は、tableを使用しています。 tableでほとんど出来ると思うのですは、 divを使う理由は何なのでしょうか。 ご存知の方がいらっしゃられたら教えて下さい。 よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 回答No.1
  • fujillin
  • ベストアンサー率61% (1594/2576)

黒い枠線がご提示のもののように太いものであれば、 テーブル自体は border:0 にしておいて、黒い枠線部分はテーブルのセルにしてしまい(幅・高さを設定)、その部分を背景色黒で表示すると言う方法ではいかがでしょうか? 幅・高さとも(黒の枠線部分を含んで)合計100%になるようにしておけばよろしいかと。

共感・感謝の気持ちを伝えよう!

関連するQ&A

  • tableタグとdivタグでどちらが良いか

    HPを製作しています。 例として 料理の画像 料理名 料理の画像 料理名 料理の画像 料理名 料理の画像 料理名 料理の画像 料理名 料理の画像 料理名 料理の画像 料理名 料理の画像 料理名 のような構成で製作を考えていますがtableタグとdivタグを入れ子にして製作するのはどちらが良いでしょうか? 作りやすさ以外にSEO対策の観点も考えるとどちらがいいのでしょうか?

  • table内でのレイアウトの問題

    みんタグさんのサンプルHTMLをベースとして自分のホームページを作ろうと思っているのですが、どうしてもレイアウトがうまくできません。 サンプルページ(みんタグさんのぺーじです。)「http://www.heo.jp/tag/table/table_template.html」内の「@nifty型」 ソース(みんタグさんのぺーじです。)「http://www.heo.jp/tag/table/5.html」 本文(背景がオレンジ系の色で黒文字でメニュー(2、3)と書いてあるところの上)を長くすると左(背景が青系でメニューと書いてある場所の下)が移動してしまいます。(縦にセンタータグを使ったようになってしまいます) 説明がわかりにくいですがよろしくおねがいします。

    • ベストアンサー
    • HTML
  • tableタグについて

    どのようのウィンドー幅になっても全ての文字が表示させたいのですが、以下のタグの何処がおかしいのでしょうか。 <table width="100%" cellpadding="0" cellspacing="0"> <tr> <td> <div align=center> <table width="700"> <tr> <td>あいうえお・かきくけこ・さしすせそ</td> </tr> </table> </div> </td> </tr> </table> この場合、ウィンドー枠を右から左に向かって縮小していくと、「あいうえお・かきくけこ・さしすせそ」の”そ”から順に見えなくなります。  そのではなくて、 あいうえお かきくけこ さしすせそ になり、 さらに縮小すると あい うえ おか かき くけ こさ しす せそ の様な感じで すべてが表示されるようにしたいのですが、どのようなタグを挿入すれば良いのでしょうか? お願いします。

  • floatさせたdivタグを折り返させたくない

    Javascriptで開いた子ウィンドウ内のページについて レイアウトで困っております。 以下のようなブロック要素の配置について <div> <div style="float; left"> コンテンツA </div> <div style="float; left"> <div> コンテンツB </div> <div> コンテンツC </div> </div> <div style="clear: both"> </div> 以上のような配置になっており、 コンテンツ3の中身をJavascriptで書き換えています。 その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。 それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。 何故こうなるかは理解出来るのですが、対策が思い浮かびません。 ●思いついたが避けたい対応策 ・親のdivタグに想定出来る最大値のwidthを設定する ・tableタグによるレイアウト 良い対応策はございませんでしょうか? よろしくお願いします。

  • CSSでレイアウト divで囲んだ枠にtableを入れるとブラウザによって表示が異なる

    お世話様です。 CSSでレイアウトしたウェブサイトを作成中です。 簡単に書くと・・・ <div id="style_a"> 文字列A <table> <tr><td></td></tr> </table> 文字列B </div> IEでは、style_aがテーブル後の文字列Bにも反映されるのですが、 FirefoxとOperaでは、テーブルの前の部分でstyle_aが無効になりテーブルと文字列Bはデフォルトに戻ってしまいます。 このような場合、どのように設定すればいいのでしょうか? ちなみに間のテーブルはレイアウトとしてではなくデータを表として表示したいので使っています。 どうか教えてください。

    • ベストアンサー
    • CSS
  • テーブルレイアウトとは

    テーブルレイアウトとは,テーブルタグを表以外のコンテンツなどに使うことでしょうか? http://okfood.digiweb.jp/index.htmlのコンテンツもテーブルレイアウトなのですよね。 このサイトの場合、同じような見た目にするにはdivを縦横に重ねて、thの毎度縦幅をCSSでかえて行うのでしょうか? 大変過ぎてやっていられなくないですか? WEBデザイナーはそこまでやっているのでしょうか?それとももっと便利な方法があれば教えてください。 SEO上も不利なのでしょうか? table内の文字を軽視されるのでしょうか?

    • ベストアンサー
    • HTML
  • divタグ内のコンテンツが重なって表示されてしまう。

    下記のようなHTMLを表示させるときに IEでは上下に並んで表示されるのですが、FF、Operaなどでは重なって表示されてしまいます。 どうしたら、上下に並べて表示させられますか? <div id="a"> <div id="b"> <ul> <li>重なってしまう文字列</li> <li>重なってしまう文字列</li> </ul> </div> </div> <table> <!-- このテーブルタグの上に重なって表示されてしまう --> </table>

  • tableタグについて

    tableタグの挙動について教えてください。 下記のタグで、tableの幅は240pxにしたいのですが、 ブラウザ表示(Chrome)では230pxとなりました。 この10pxの隙間はどこで発生しているのでしょうか? どうぞよろしくお願いします。 ーーーーHTMLーーーーー <body style="width:240px;margin:0 auto;"> <div class="list-box"> <table width="240" border="0" cellspacing="0" cellpadding="0"> <tbody><tr> <td>テキスト/td> <td>テキスト/td> </tr> </tbody></table> </div> </body> ーーーーCSSーーーーー .list-box{margin:0 auto;} .list-box table{ width:100%;} .list-box table td:first-child{ background:#900;} .list-box table td:last-child{ background:#069;}

    • ベストアンサー
    • CSS
  • 画像はDIVタグとPタグの両方で囲むの?

    クラブのホームページを作っているんですが 分からない事がありますので質問させていただきます。 勉強している本で画像もPタグで囲むのが正しいと載ってましたので ------------------------------------------------------- <div><p><img src="○○" alt="なし"></p></div> ------------------------------------------------------- と記述していたんですが、 色々勉強していくとPタグではなく、 ブロックレベル要素で囲むのが正しいとの事ですので <div>も<p>もブロックレベル要素なので ------------------------------------------------------- <div><img src="○○" alt="なし"></div> ------------------------------------------------------- とか ------------------------------------------------------- <p><img src="○○" alt="なし"></p> ------------------------------------------------------- みたいに無理に<div>と<p>の2つではなく <div>だけ、または<p>だけで、囲むのも問題はないのでしょうか? ※スタイルシートでレイアウトしています。 ※画像はスペースを空ける為だけですので<div>~</div>に文章はありません。  同じくaltの指定もしていません。 ※画像でスペースを空けるは、あまり良くない事は分かっていての質問です。 別の質問ですけど、あるホームページでH2(見出しタグ?)で ------------------------------------------------------- <div><h2>タイトル</h2></div> <div><p>文章</p></div> ------------------------------------------------------- が正しいと載っていたんですが ------------------------------------------------------- <div> <h2>タイトル</h2> <p>文章</p> </div> ------------------------------------------------------- では間違っているんでしょうか? すいません、もう1つ質問です。 http://openlab.ring.gr.jp/k16/htmllint/htmllint.html でチェックしてみると98点でした。 私のパソコンや、友達のパソコンでは、ちゃんと表示されてるんですが 100点じゃないと、表示されないパソコンもあるんでしょうか? 学校が短大で男子がいないので HTMLやCSSが苦手な子ばかりです。 私と副部長で頑張ってほぼ完成しましたが、 はじめてホームページを作った初心者で 細かい事を教えてもらえる人がいなくて困ってます。 初心者の質問で申し訳ありませんが よろしくお願いします。

  • ホームページ製作において、テーブルタグとdivタグのどっちを使うか選択

    ホームページ製作において、テーブルタグとdivタグのどっちを使うか選択についてです。 テーブルタグはレイアウトには使ってはいけない(推奨しない)というのが 書かれていますが、例えば、以下の画像のように複数の画像を整列させて 配置する(商品画像一覧や写真一覧など)のような場合、 テーブルタグで画像とテキストをぶち込むのは駄目なんでしょうか? まさか、画像1つに対してdiv1個、テキスト1個に対してdiv1個みたいに 対応させ、段組にしていくほうがSEO対策とかプロっぽいんですかね? 基本的なことですいません。