ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >CSS一覧 >テーブル

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

{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一覧
テキスト
イメージ
テーブル
ボックス
リンク
リスト
水平線
フォーム
フレーム
ページ全体

HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.