テーブルとテーブルの間隔について

質問

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

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

回答No.4

kyotokyo · ベストアンサー

一番シンプルな方法としては
<table>タグを<table style="margin-bottom:○○px">と書き直します。

お礼

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

回答No.3

wildcat-yp

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が１文字分の単位です。

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

参考URL：

http://www.tohoho-web.com/css/

補足

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

色々と試してみます。

回答No.2

noname#119957

ｈｔｍｌファイル
<table id="aaa"> </table>
<table> </table>

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

補足

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

回答No.1

salonpath

cssでtable周りの間隔を指定してやります
table{
margin-bottom:6px;
}
上の意味は、tableタグの下に6pxの隙間を空けるです。

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

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

補足

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

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