tableにtable。table同士の間隔を拡大

2011/01/30 02:09

このQ&Aのポイント

table内にtableを入れ、スクロールバーを付けるためにtable同士の間隔を開けたい
言葉が少ないが、画像で説明する
スタイルシートを使用し、テーブルの幅や高さ、背景色やボーダー、テキストの配置を設定

tableにtable。table同士の間隔を拡大

スクロールバーを付けるためにtable内にtableを入れました。中のtableとtableの間隔を開けたいです。言葉が少ないですが、その分画像で頑張って説明します。お願いいたします。 <style type="text/css"> #test0{ cellpadding: 2; width: 518px; background-color : #fff; border:1px solid #333; border-spacing:0; } #start{ width: 495px; height: 230; border-top:1px solid #333; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } .center{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #ff0000; } #end{ width: 495px; height: 230; border-top: 0; border-left:1px solid #333; border-right:1px solid #333; border-bottom:1px solid #40ee22; } td.test1{ background-color: #000000; color: #333333; } td.test2 img{ margin: 10px; } .test3{ font-size: 12px; padding: 5px; } td.test4{ text-align: center; } </style> <table id="test0"> <tbody> <tr> <td> <DIV style="height:400px; overflow:auto;"> <table id="start"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table class="center"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> <table id="end"> <tr> <td class="test1" colspan="3">タイトル</td> </tr> <tr> <td class="test2" rowspan="2"><img src="test.jpg" width="100" height="80"></td> <td class="test3" colspan="2">テストテストテストテストテストテスト</td> </tr> <tr> <td class="test4">left</td> <td class="test4">right</td> </tr> </table> </div> </td> </tr> </tbody> </table>

tekkenman7
お礼率70% (150/212)

HTML
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/01/30 18:44 回答No.4

<h1>サンプル</h1> <div class="product"> <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 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>

質問者

お礼 2011/02/24 11:44

ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/01/30 18:43 回答No.3

<!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">  </style> </head> <body> ・・続く・・・

質問者

お礼 2011/02/24 11:45

ありがとうございました。

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/01/30 18:41 回答No.2

ご存じだとは思いますが、「スクロールを表示させたい」というようなプレゼンテーションのために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 ) で検証済みです。文字数の制限が厳しくなったので分けて・・

質問者

お礼 2011/02/06 04:38

アドバイス有難うございます。頂いたアドバイスで質問したいことがあります。 >ご存じだとは思いますが、「スクロールを表示させたい」 >というようなプレゼンテーションのために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)

2011/01/30 10:42 回答No.1

こんにちは余白を空けるときには 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; }

質問者