マス目（セル？）とマス目の間に間隔を置きたいのですが・・。

質問

マス目（セル？）とマス目の間に間隔を置きたいのですが・・。
次のソースで、マスが横に3つ並びます。

<table style="width: 450px; height: 150px;" border="1">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>

質問１
質問のソースで、枠線の色を指定するときのソースを教えて下さい。
希望の色は「黒」です。

質問2
質問のソースで、マスどうしが、くっつかないで隙間を
空けたいのでソースを教えて下さい。希望は全角スペース2つ分くらいです。

質問3
マスの中に150×150の画像を挿入しようと思っています。
width: 450px; height: 150pxとソースで指定しましたが
ピッタリ収める場合これでよいでしょうか？

質問4
今回の質問の場合、「マス」と「セル」とどちらで質問するのが
正しいですか？

あまりHTMLが詳しくありませんので分かりやすく教えていただけると
ありがたいです。宜しく御願いします。

回答No.3

torayoshi · ベストアンサー

torayoshiです。
なるほど…まんま参考サイトみたいで良いなら何もテーブル組の必要ないですね。
参考サイトはリストなので、これ使わせてもらいましょう ^^;
三つの画像に黒枠付けて全角二つ分の間隔をあけてそれを横に並べる。
黒枠は1pxです、もっと太くっていうなら言ってくださいね。

<ul style="margin:0px 16px 0px 10px;float:left;padding-left:0px;list-style-type:none;">
<li style="padding-top:10px;">
<img src="○○.jpg"width="150"height="150"alt=""style="border:1px solid #000000;"></li>
</ul>
<ul style="margin:0px 16px;float:left;padding-left:0px;list-style-type:none;">
<li style="padding-top:10px;">
<img src="○○.jpg"width="150"height="150"alt=""style="border:1px solid #000000;">
</li>
</ul>
<ul style="margin:0px 16px;float:left;padding-left:0px;list-style-type:none;">
<li style="padding-top:10px;">
<img src="○○.jpg"width="150"height="150"alt=""style="border:1px solid #000000;">
</li>
</ul>
<p style="clear:left;"></p>
～以下省略～

※ 画像間の間隔やそれぞれの位置関係を変える時はmarginとpaddingの数値を変更します。
完成予想図はこれ↓
http://www16.plala.or.jp/zaq_501/sample/d.html

お礼

できました～～！！
表示させたかったのは、これです＾＾
黒枠の1pxも希望通りです♪

セルではなくて、リストというのですね。セルとマスで検索しても
ヒットしないはずでした。。

回答のソースは手打ちで打ってくれているんですよね・・
質問が下手で何度も打ち直しさせてしまって本当にごめんなさい＞＜。

完成予想図も有難うございます。画像のチョイスもとても素敵でした。

リストも知らない有様なので、また、質問することがあると思います。
その時は、是非、見つけて回答 付けて下さいね＾＾

本当に、本当に有難うございました。。

回答No.2

torayoshi

ヘッダーがいじれないサイトなわけですね？
【CSS】の部分はヘッダーに書き込むコードなので、
bodyにそのまま書いたらそうなります。
そうなると、要素一つ一つにスタイルを当てていくしかないでしょうね。

<table style="width:450px;height:150px;
border-top:5px solid #000000;
border-left:5px solid #000000;
border-collapse:collapse;">
<tbody>
<tr>
<td style="border-right:24pt solid #000000;border-bottom:5px solid #000000;padding:0 0;"></td>
<td style="border-right:24pt solid #000000;border-bottom:5px solid #000000;padding:0 0;"></td>
<td style="border-right:5px solid #000000;border-bottom:5px solid #000000;padding:0 0;"></td>
</tr>
</tbody>
</table>

※ tdのCSSはインデントしないようにベタ貼りで。
※ 質問者さんの利用してるそのサイトを私は知らないのでうまく行かないかも知れない。
完成予想図はこんな感じ↓
http://www16.plala.or.jp/zaq_501/sample/c.html

補足

回答して頂いた今回のソースは、無事 反映されました＾＾
写真入りの完成予想図まで入れて頂き本当に有難うございます☆

ただ、質問を文章で伝えるのは思いの外、下手で少し説明不足でした。
説明の補足をさせて下さい。

回答頂いたセルは、隙間はありますが、枠線の黒で塗りつぶれています。
希望は、黒枠のセルが1つずつ独立していて、全角スペース2つ分の間隔を空けて
横に3つ並べたいと思っています。

あっ！すみません。
いま、補足を入力していながら気がつきました！

質問のソースが
<table style="width: 450px; height: 150px;" border="1">
となっているので、意図する質問が伝わらなかったのだと思います。

150×150の画像を挿入するセルを3個、間隔を置いて横に並べたいです。

こちらのサイトような感じです。↓
http://at-foods.com/category/araiya

質問が下手で何度もすみません。
宜しく御願いします。。

回答No.1

torayoshi

こんな感じになるかと…

質問1、2
【CSS】
table{
width:450px;height:150px;
border-top:5px solid #000000;
border-left:5px solid #000000;
border-collapse:collapse;
border-spacing:0;
}
td.space{
border-right:24pt solid #000000;
border-bottom:5px solid #000000;
padding:0 0;
}
td{
border-right:5px solid #000000;
border-bottom:5px solid #000000;
padding:0 0;
}
【html】
<table>
<tbody>
<tr>
<td class="space"></td>
<td class="space"></td>
<td></td>
</tr>
</tbody>
</table>

質問2
全角スペース2個分だとIEなら12ptとして換算。

質問3
ぴったり収めるにはpaddingで0 0

質問4
セル

※ テーブルボーダー1px＝CSSで5pxとして換算。

補足

面倒な質問に丁寧に回答して頂き、ありがとうございます。
HTMLがよく分かっていないので質問がわかりづらかったかもしれないです。
説明の補足をさせてください。

質問のソースを使う状況ですが・・
cssで雛形の出来ている有料サイトを使用しています。
HTMLが分からなくてもサイトが出来る無料ブログのような作りです。

サイトの作成には、HTMLエディタ画面でHTMLを打ち込んで作成する方法と
HTMLが分からない人向けのビジュアルエディタ画面で作成する方法の
2つのほうほうがあります。

私はHTMLがよく分からないのでビジュアルエディタ画面で作成しているのですが
質問のようなセルを表示させるためには、1度、HTMLエディタ画面で
ソースを打ち込んでビジュアルエディタ画面に切り替える必要があります。

回答して頂いたソースを入力してみたところ、反映されないでソースが
そのまま表示されてしまいました。

私のような場合で、黒い枠線1指定のセルを隙間を空けて3つ横に並べるソースが
ありましたら教えて頂きたいです。
隙間は全角2つ分くらいが希望です☆
宜しく御願いします。。