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

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

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

No.4 ベストアンサー 回答者： kyotokyo 回答日時： 2009/08/11 02:14

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

<table>タグを<table style="margin-bottom:○○px">と書き直します。

この回答へのお礼

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

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

No.3 回答者： wildcat-yp 回答日時： 2009/08/11 01:53

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/

この回答への補足

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

色々と試してみます。

補足日時：2009/08/11 17:16

No.2 回答者： noname#119957 回答日時： 2009/08/11 00:54

ｈｔｍｌファイル

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

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

この回答への補足

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

補足日時：2009/08/11 16:56

No.1 回答者： salonpath 回答日時： 2009/08/11 00:14

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

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

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

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

この回答への補足

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


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

補足日時：2009/08/11 00:31