こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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>

投稿日時 - 2011-01-30 02:09:26

QNo.6484811

すぐに回答ほしいです

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

<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>

投稿日時 - 2011-01-30 18:44:33

お礼

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

投稿日時 - 2011-02-24 11:44:52

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.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">
<!--
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>

・・続く・・・

投稿日時 - 2011-01-30 18:43:05

お礼

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

投稿日時 - 2011-02-24 11:45:11

ANo.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-01-30 18:41:40

お礼

アドバイス有難うございます。

頂いたアドバイスで質問したいことがあります。

>ご存じだとは思いますが、「スクロールを表示させたい」
>というようなプレゼンテーションのために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

教えて頂いたのに失礼なことを言いますが、
本当に信用していいの?と正直感じてしまいます。

投稿日時 - 2011-02-06 04:38:00

ANo.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;
}

投稿日時 - 2011-01-30 10:42:07

お礼

有難うございます。
理想通りの形になりました。

投稿日時 - 2011-02-06 04:17:24

あなたにオススメの質問