- ベストアンサー
tableにtable。table同士の間隔を拡大
- table内にtableを入れ、スクロールバーを付けるためにtable同士の間隔を開けたい
- 言葉が少ないが、画像で説明する
- スタイルシートを使用し、テーブルの幅や高さ、背景色やボーダー、テキストの配置を設定
- tekkenman7
- お礼率70% (150/212)
- HTML
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
<h1>サンプル</h1> <div class="product"> <div class="section"><!-- HTML5ではsectionという要素になる --> <h2>タイトル</h2> <ul> <li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li> <li class="caption">テストテストテストテストテストテスト</li> <li><span class="price">価格</span><span class="stock">在庫</span></li> </ul> </div> <div class="section"> <h2>タイトル</h2> <ul> <li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li> <li class="caption">テストテストテストテストテストテスト</li> <li><span class="price">価格</span><span class="stock">在庫</span></li> </ul> </div> <div class="section"> <h2>タイトル</h2> <ul> <li class="photo"><img src="sample.jpg" width="100" height="80" alt=""></li> <li class="caption">テストテストテストテストテストテスト</li> <li><span class="price">価格</span><span class="stock">在庫</span></li> </ul> </div> </div> </body> </html>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta name="author" content="ORUKA1951"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" > <link rel="START" href="../index.html"> <style type="text/css"> <!-- div.product{ width: 518px; background-color : #fff; border:1px solid #333; } div.product div.section{ width: 495px; border: 1px solid #333; border-top-width: 0px; border-bottom-color:#ff0000; clear:both; margin: 5px 0px; } div.product div.section + div{/* 内部のdiv同士のマージンのみ広くする。*/ margin-top:30px; } div.product div.section h2{ background-color: black;color:#333333; margin:2px; } div.product div.section ul, div.product div.section ul li{ display:block; list-style:none; padding:0px; margin:0px; } div.product div.section ul li{ margin-left: 110px; height: 40px; } div.product div.section ul li.caption{ font-size:12px; padding:5px 2px; } div.product div.section ul li.photo{ float:left; margin-left:0px; width:100px;height:80px; } div.product div.section ul li span{ text-align:center; display:inline-block; width: 49%; } --> </style> </head> <body> ・・続く・・・
お礼
ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ご存じだとは思いますが、「スクロールを表示させたい」というようなプレゼンテーションのためにtableを使うのは？？です。そもそも、スタイルシートを使う目的は・・【重要】 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 14.1 スタイルシートの概説 ・・・【中略】・・・ こうしたテクニックは、特定の人々、特定の時代状況でしか成り立たず、すべての人々、すべての時代状況において成り立つものではないのだ。こうしたテクニックの例を挙げよう。 * ・・・【中略】・・・ * ページレイアウトの目的で表を用いる。 * ・・・【中略】・・・ ・・・【中略】・・・ スタイルシートはこれらの問題を解決すると同時に、HTMLにおける制限されたプレゼンテーション機構に取ってかわる。スタイルシートでは、行間の設定やインデントの設定、テキスト色や背景色、フォントのサイズとスタイル、その他様々なプロパティの設定が簡単にできる。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )］より ★HTMLはLynxのようなテキストブラウザで確認すると検索エンジンがどのように読んでいるか判ります。 お示しのデザインは次のような簡単なHTMLとCSSで実現できると思います。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みです。 文字数の制限が厳しくなったので分けて・・
お礼
アドバイス有難うございます。 頂いたアドバイスで質問したいことがあります。 >ご存じだとは思いますが、「スクロールを表示させたい」 >というようなプレゼンテーションのためにtableを使うのは？？です。 どうしてもスクロールを表示させた枠内に情報を入れる形が必要なのですが、 tableを利用する以外にも指定の枠内に縦スクロールを表示させる方法があって、 こういう場合にtableを使用するべきではないということでしょうか。 >お示しのデザインは次のような簡単なHTMLとCSSで実現できると思います。 サンプルをコピペし、再現してみましたが、スクロールバーが表示されません。 >Another HTML-lint gateway 使わせて頂きました。 いろいろなサイトのソースを使って結果を見てみましたが、 全部が「がんばりましょう」となります。 http://www.square-enix.com/jp/ http://www.sony.co.jp/SonyInfo/csr/ http://www.microsoft.com/business/smb/ja-jp/default.mspx 教えて頂いたのに失礼なことを言いますが、 本当に信用していいの？と正直感じてしまいます。
- rukuku
- ベストアンサー率42% (401/933)
こんにちは 余白を空けるときには margin を使います。 CSSの部分を以下のようにしてみてください。 .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; margin-top:20px; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; margin-top:20px; }
お礼
有難うございます。 理想通りの形になりました。
お礼
ありがとうございました。