外側、内側の余白を指定する

{margin:値;}、{margin-位置:値;}でテーブルの外側（周囲）の余白を指定することが出来ます。値はpx、%などで指定します。

テーブルの外側（周囲）の余白の指定パターンは以下の通り。（marginの方）

余白を入れたい位置	説明
margin:値; padding:値;	値が1個の場合、上下左右全ての余白が入ります。
margin:値1 値2; padding:値1 値2;	値1が上下、値2が左右の余白です。
margin:値1 値2 値3; padding:値1 値2 値3;	値1が上、値2が左右、値3が下の余白です。
margin:値1 値2 値3 値4; padding:値1 値2 値3 値4;	値1が上、値2が右、値3が下、値4が左の余白です。
margin-top:値; padding-top:値;	上の余白だけ指定します。
margin-right:値; padding-right:値;	右の余白だけ指定します。
margin-left:値; padding-left:値;	左の余白だけ指定します。
margin-bottom:値; padding-bottom:値;	下の余白だけ指定します。

【ブラウザ表示】

天井

テーブルの上下に30pxの余白

床

ソース

天井
<table class="sample11">
<tr>
<td>テーブルの上下に30pxの余白</td>
</tr>
</table>
床

外部ファイル

table.sample11{
border:1px black solid;
margin:30px 0px;
}

<body>～</body>に直接記入する場合

天井
<table style="border:1px black solid; margin:30px 0px;">
<tr>
<td>テーブルの上下に30pxの余白</td>
</tr>
</table>
床

{padding:値;}、{padding-位置:値;}でテーブルのセルの内側の余白を指定することが出来ます。
内側の余白の指定パターンは上の表を参照して下さい。（paddingの方）

【ブラウザ表示】

内側の余白30px

ソース

<table class="sample5">
<tr>
<td class="cellyohaku">内側の余白30px</td>
</tr>
</table>

外部ファイル

table.sample5{border:1px black solid;}
td.cellyohaku{
border:1px black solid;
padding:30px;
}

<body>～</body>に直接記入する場合

<table style="border:1px black solid;">
<tr>
<td style="border:1px black solid; padding:30px;">
内側の余白30px
</td>
</tr>
</table>

CSS一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体