あなたの映画力を試せる!POPLETA映画検定(無料) >>

同じサイズのテーブル縦にいくつか並べているのですが、今現在は全く隙間無くくっついています。

これを少しだけ(改行タグ<br>の半分以)間隔を空けたいのですが、どうすれば良いのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (4件)

一番シンプルな方法としては


<table>タグを<table style="margin-bottom:○○px">と書き直します。
    • good
    • 5
この回答へのお礼

簡単でいいですね。
思い通りにできました。
ありがとうございます。

お礼日時:2009/08/11 18:03

IDで指定する場合は、


#aaa {
margin-bottom:10px;
}
のように頭に#をつけるとID用のスタイルになります。
ただし、一応表示はされると思いますが、一つのドキュメント内ではIDは重複してはいけないことになっています。

同じテーブルを複数並べる場合は、クラス指定が良いと思います。
その場合は、
aaa {
margin-bottom:10px;
}
として、
<table class="aaa">とすると指定可能です。
また、CSSの定義を table.aaaとすると、tableのaaaのクラスという風に同じクラス名で、タグによって挙動を分けることも可能です。

当たり前ですが、
<table style="margin-bottom:10px">のようにしてもできます。

ちなみに、margin-bottomはテーブルの下にマージンを開けるので、他にもmargin-top,margin-right,margin-leftと、上下左右等間隔にするmarginがあります。

後、改行半分の高さは「0.5em」ということになっています。emが1文字分の単位です。

なお、スタイルシートを使用したレイアウトは、ブラウザによって表示イメージが変わる可能性があります。

参考URL:http://www.tohoho-web.com/css/

この回答への補足

なるほど・・・
大変丁寧にありがとうございます。

色々と試してみます。

補足日時:2009/08/11 17:16
    • good
    • 0

htmlファイル


<table id="aaa"> </table>
<table> </table>

cssファイル
aaa {
margin-bottom:10px;
}

この回答への補足

なるほど・・・
それでよかったのですね。
ありがとうございます。

補足日時:2009/08/11 16:56
    • good
    • 0

cssでtable周りの間隔を指定してやります


table{
margin-bottom:6px;
}
上の意味は、tableタグの下に6pxの隙間を空けるです。

ただ、このまま書くと全てのtableの下に隙間が出来るので、htmlの書き方によっては対象のtableを絞り込む必要があります。

tableを包む親要素にidを振って間隔をあけたいtableを指定するか、間隔をあけたいtable毎にclassを指定するかしてください。

この回答への補足

早速の回答ありがとうございます。


tableを包む親要素にidを振る方法でやってみようと思います。
が、その場合はどのように記述すればよいのでしょうか?

補足日時:2009/08/11 00:31
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qtable表を横に並べる際の間隔指定

<table style='float : left;'>
を用いて、tableを並べています。
この時table同士がくっついてしまうのですが、間隔を開ける方法がありましたら教えて下さい。

Aベストアンサー

マージンをあければいいのでは?

<table style="float:left;margin:5px;"> などなど...。

margin-left:10px; と、左側だけを指定する事も出来ます。
margin-right、margin-top、margin-bottom などなど。

Q[CSS] tableの行の間隔をあける

table {
 border-collapse: separate;
 border-spacing: 5px;
}

とすれば、セル同士の間隔が広がるのですが、行同士の間隔だけをあける方法はありますか?

イメージ的には以下の様な感じです

<table>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
<tr style="margin-bottom: 5px">....</tr>
</table>

よろしくお願いします

Aベストアンサー

<table summary="見本の表" border="1">
 <tbody>
  <tr>
   <th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
 </tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="見本の表"] th,
table[summary="見本の表"] td{
border:solid 1px green;
width:10em;
text-align:right;
}
table[summary="見本の表"] th{
border-color:red green;
text-align:center;
}

<table summary="見本の表" border="1">
 <tbody>
  <tr>
   <th abbr="項1">1項</th><th abbr="2項">2項</th><th abbr="項3">3項</th>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
  <tr>
   <td>値</td><td>値</td><td>値</td>
  </tr>
 </tbody>
</table>
table[summary="見本の表"]{
border:blue double 4px;
border-collapse: separate;
border-spacing:0 5px;
line-height:1.6em;
}
table[summary="...続きを読む

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QHTMLでテーブルを横に並べる方法

HTMLでホームページを作っています。
テーブルを横に二つ並べたいのですが、二つ目のテーブルはどうしても最初のテーブルの下の段になってしまいます。どうしたら横に並べることができますか?
教えていただければ幸いです。
よろしくお願いします。

Aベストアンサー

2列のテーブルを作ったらいかがでしょうか?
<table>
<tr>
<td>1つめのテーブルに入れる内容</td>
<td>2つめのテーブルに入れる内容</td>
</tr>
</table>

それぞれのテーブルをそのまま使いたいならば、
↑のテーブルのセルの中に、それぞれ入れれば2つ並びます。
<table>
<tr>
<td><table>←1つめのテーブル→</table></td>
<td><table>←2つめのテーブル→</table></td>
</tr>
</table>

Qテーブルとテーブルの間に、隙間があいてしまいます。

お世話になります。
表題のとおりです。

下記ソースのテーブル<!-- 丸枠 -->と<!-- ヘッダ -->間は、問題ないのですが
テーブル<!-- ヘッダ -->と<!-- ロゴ -->の間に隙間が開いてしまいます。
1時間ほど考えましたが、どうにもこうにも理由が分かりません。
初心者的なソースで恐れ入りますが、詳しい方にご助力いただければ幸いです。

---------------------------以下ソース--------------------------------------
<body>
<!-- 背景白 -->
<table border="1" cellpadding="0" cellspacing="0" class="table_white">
<tr>
<td>
<!-- 丸枠 -->
<table width="820" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="image/head.gif" width="820" height="9" /></td>
</tr>
</table>
<!-- 丸枠ここまで -->
</td>
</tr>
<tr>
<td align="center">
<!-- ヘッダ -->
<table width="730" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="324" height="15" align="left" >
<strong class="seo01">ミ</strong></td>
<td width="203"></td>
<td width="5" align="center"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
<td width="42"><a href="kaisya.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','image/head_kaisya_ov.gif',1)"><img src="image/head_kaisya.gif" alt="会社概要" width="42" height="11" border="0" id="Image4" /></a></td>
<td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
<td width="61"><a href="toiawase.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('問い合わせ','','image/head_toiawase_ov.gif',1)"><img src="image/head_toiawase.gif" alt="お問い合わせ" width="61" height="11" border="0" id="問い合わせ" /></a></td>
<td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
<td width="62"><a href="sitemap.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('sitemap','','image/head_sitemap_ov.gif',1)"><img src="image/head_sitemap.gif" alt="sitemap" width="62" height="11" border="0" id="sitemap" /></a></td>
<td width="5"><img src="image/spacer_glay.gif" width="1" height="10" /></td>
</tr>
</table>
<!-- ヘッダ ここまで-->
</td></tr>
<tr>
<td align="center">

<table width="730" border="0" cellspacing="0" cellpadding="0">
<!-- ロゴ -->
<tr>
    <td colspan="13" align="left"><a href="http://www.com/"><img src="image/logo.gif" alt="ミ" width="92" height="48" border="0" ></a></td>
</tr>
<!-- ロゴ ここまで -->
---------------------------ソースここまで--------------------------------------

---------------------------念のため使用CSS--------------------------------------
body {
font-family: "MS P明朝", "細明朝体", "ヒラギノ明朝 Pro W3";
font-size: 12pt;
font-weight: normal;
color: #5c5c5c;
background-color: #889fb6;
margin-left: 30px;
margin-top: 30px;
letter-spacing: 2.5px;
line-height: 18px;
}


.table_white {
background-color: #FFFFFF;
width: 820px;
}

.seo01 {
font-size: x-small;
letter-spacing: normal;
font-weight: normal;
}

---------------------------ここまで--------------------------------------

お世話になります。
表題のとおりです。

下記ソースのテーブル<!-- 丸枠 -->と<!-- ヘッダ -->間は、問題ないのですが
テーブル<!-- ヘッダ -->と<!-- ロゴ -->の間に隙間が開いてしまいます。
1時間ほど考えましたが、どうにもこうにも理由が分かりません。
初心者的なソースで恐れ入りますが、詳しい方にご助力いただければ幸いです。

---------------------------以下ソース--------------------------------------
<body>
<!-- 背景白 -->
<table border="1" cellpadding="0" cellspacing="0" cl...続きを読む

Aベストアンサー

オリジナルのソースもこの通りなのでしたら、

<!-- ロゴ -->
<tr>
※    <td colspan="13" align="left"><a href="http://www.com/"><img src="image/logo.gif" alt="ミ" width="92" height="48" border="0" ></a></td>
</tr>
<!-- ロゴ ここまで -->

※のところに全角スペースが4つも入ってます。ソースをインデントしたければ、タブを使用して下さい。<tr>の直下には子要素である<th>もしくは<td>しか入れません。テキストデータが素のままで入る事は有り得ません。

Q画像イメージの上下左右、欲しいところに好きな間隔を入れられますか?

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方に要らない間隔ができてしまい困っています。

例えば右だけに間隔が欲しい。
左だけに間隔が欲しい。

こういう場合って、何かやり方があるのでしょうか。

もともと余白込みの画像を用意するという手も講じましたが、
その場合はその場合で、その画像が他のレイアウトに流用しづらい
という弱点を生んでしまい、レイアウトごとに画像を用意しなければならないので
対症療法としてはうまくいきませんでした。

また、画像ごとにセルを用意して任意の余白を作り出す手もありましたが、
セルがあまりにも絡まりあってしまい、
かなりぐちゃぐちゃなものになるためうまくいきませんでした。

やはりもうちょっと詳しい方にお訊きしようと思いまして
質問を立てさせていただきました。
素人質問で大変申し訳ありません。
どうぞ宜しくお願いいたします。

こんにちは。タイトルの通りサイト作成で、
画像の上下左右、好きな方向に間隔を入れられるかその方法をお教えください。

参考までに、DreamWeaver(ドリームウィーバー)2004MXです。

画像とテキストの兼ね合いで、画像の右側や左側に、
ところどころで間隔が欲しいと思っています。

間隔をいじれるところといえば縦間隔、横間隔になりますが、
縦間隔なら「上」と「下」、横間隔なら「右」と「左」、
これらが一度に動いてしまうのです。
片方には確かに欲しい間隔が得られるのですが、
ほう片方...続きを読む

Aベストアンサー

HTMLの初歩です。具体的には、
-------------------------------------------
<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 10px 20px 0 30px;">

上10px 右20px 下0 左30px の四方の隙間が開く。
数値は例なので適当に変更を。
-------------------------------------------

<img src="○○.gif" width="100" height="100" alt="*"
style="margin: 5px 20px;">
上下5px 右右20px の2方の隙間が開く。

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qテーブル内のセル間にスペースを空けたい

tableタグとtr、tdを使って2行2列の表を作っています。

(1)それぞれのセルとセルの間にスペースを空けたいです。
(2)セルの中の文字の開始位置を1文字分程空けたいです。

CSSでの指定でも構いません。

tdやpにmarginを指定したり、cellpadingなど色々試しましたがうまく行きません。
どうかご教授をお願いします。

Aベストアンサー

border-collapse:separateとborder-spacingで指定します。collpaddingは非推奨です。
セル内の余白はpaddingです。配置はtext-alignとvertical-alignを使用します。

tablekborderは本来、border-collapse:separateほほ分離ボーダーモデルのはずです。
仕様書にはcollpaceのはずなのですが。
また、border-spaceは0が仕様書なのですが、ブラウザは1px空けます。
★tableの描画は仕様書どおりにブラウザが実装していないため、きちんと指定する必要があります。★

サンプル
<table summary="sample1">
 <caption>価格表</caption>
 <tbody>
  <tr>
   <th abbr="name">商品名</th><th abbr="コード">商品コード</th><th abbr="price">価格</th>
  </tr>
  <tr>
   <th abbr="no1">商品1</th><td>0012</td><td>\1,200-</td>
  </tr>
  <tr>
   <th abbr="no2">商品2</th><td>0012</td><td></td>
  </tr>
  <tr>
   <th abbr="no3">商品3</th><td>0013</td><td>\1,500-</td>
  </tr>
 </tbody>
</table>
という表があるとします。
★ひとつずつ宣言を追加して確認すること。

まずセレクタでこの表を特定します。
table[summary="sample1"]{}/* 要素セレクタを使います。*/
次に表の枠線について指定します。

/* table要素のborder */
table[summary="sample1"]{
border:solid 2px black;
}
/* table要素の背景 */
table[summary="sample1"]{
background-color:yellow;
}
/* セルの指定 */
table[summary="sample1"] th,
table[summary="sample1"] td{
border:solid 1px gray;
}
/*背景色を指定します。 */
table[summary="sample1"] th{
background-color:silver;
}
table[summary="sample1"] td{
background-color:lime;
}
/* セル間が開いていると思います。 その間隔を指定してみます。 */
table[summary="sample1"]{
border-collapse:separate;/* separate指定する */
border-spacing:10px 4px; /* 最初の値が上下 ふたつ目の値が左右、ひとつだけだと周囲 */
}
/* 内容のないセルの表示・非表示 */
table[summary="sample1"]{
empty-cells:hide;/* showで見える。 */
}
table[summary="sample1"] caption{
caption-side:left;
font-weight:bold;
}
/* 今度はくっつける */
/* セル間が開いていると思います。 その間隔を指定してみます。 */
table[summary="sample1"]{
border-collapse:collapse;/* collapseを指定する */
border-spacing:0;
}

border-collapse:separateとborder-spacingで指定します。collpaddingは非推奨です。
セル内の余白はpaddingです。配置はtext-alignとvertical-alignを使用します。

tablekborderは本来、border-collapse:separateほほ分離ボーダーモデルのはずです。
仕様書にはcollpaceのはずなのですが。
また、border-spaceは0が仕様書なのですが、ブラウザは1px空けます。
★tableの描画は仕様書どおりにブラウザが実装していないため、きちんと指定する必要があります。★

サンプル
<table summary="sample1">
 <caption>...続きを読む

Qhtml、テーブル内にテーブル。表示位置

htmlで<table>タグを使って テーブルを作成しました。(これをテーブル(1)とします。)
このテーブルのなかに表を作成したいため、テーブル内で<table>タグを使用し表を作成しました。(ここで作成したテーブル(表)をテーブル(2)とします。)
つまり、テーブル(1)の中にテーブル(2)(表)が存在する。といった状況です。

ところがテーブル(2)がテーブル(1)の真ん中に表示されてしまいます。
そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。
どうしたらよいでしょうか?
教えてくださいよろしくお願い致します。

Aベストアンサー

> そこでテーブル(2)のタグに<table align="left" valign="top">というような要素を加えてみたのですが変化がありません。

テーブル(2)ではなくてテーブル(1)を次のようにすればテーブル(2)が左に寄ります。

<TABLE> ここはテーブル(1)
<TBODY>
<TR>
<TD align="left">
<TABLE> ここからテーブル(2)
<TBODY>
<TR>
<TD> 


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング