表の周囲にマージンを入れる

[新着] TAG indexオフライン版 3.0 を準備中です


margin: ***;

ブラウザ
Internet Explorer Netscape Firefox Opera
参考
書式基本 要素名 クラス ID

margin は、マージン(外側の余白)を指定するプロパティです。

table要素にこのスタイルを設定すると、表の周囲にマージンを入れることができます。


table {
margin: 5px;
}


margin マージンの大きさを指定します

マージンの大きさは、数値+単位(px、他)か %(割合)、auto(自動)で指定します。

マージンの指定方法については、ボックスカテゴリーの「マージン・パディング」の項目をご覧ください。

※以下の使用例では、floatプロパティと組み合わせて使用しています。
※IEの場合、回り込みを指定した表に左右のマージンを指定すると、片側のマージン(以下の使用例では左のマージン)の大きさが2倍になってしまうようです。


使用例

上下に20ピクセル、左右に40ピクセルの余白を指定した場合

<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">
<!--

#example {
width: 100%;
}

table, td {
border: 2px #2b2b2b solid;
}


table {
width: 200px;
float: left;

margin: 20px 40px;
}


-->
</style>

</head>
<body>

<div id="example">

<table>
<tr>
<td>HP作成A</td>
<td>HP作成B</td>
</tr>
<tr>
<td>HP作成C</td>
<td>HP作成D</td>
</tr>
<tr>
<td>HP作成E</td>
<td>HP作成F</td>
</tr>
</table>

<p>
スタイルシートを使った<br>
上下左右の ...
</p>

</div>

</body>
</html>

これをブラウザで見ると次のように表示されます

HP作成A HP作成B
HP作成C HP作成D
HP作成E HP作成F

スタイルシートを使った
上下左右のマージンです
。サンプルの文章を書い
てみました。このように
指定すると表と文字の間
に、適度な余白を入れる
ことができます。
この例では、上下に20ピ
クセルのマージンを指定
し左右に40ピクセルのマ
ージンを指定しています。



[特集] レンタルサーバー比較 & サーバー選びのチェックポイント

サイト内検索について - ベーシック版