表のフロート(浮動化) 表周囲のマージン回り込み解除 テーブルcss リファレンス へ
表のフロート(浮動化)を指定する(CSS)
float: left;
 float は、全てのタグ(要素)に適用できます(positionプロパティで「absolute」または「fixed」が指定された要素を除く)。

 float は、フロート(浮動化)を指定するプロパティです。このプロパティを<table>タグ(要素)に設定すると、表をフロートさせる(表を左か右に寄せて、テキストなどを逆側に回り込ませる)ことができます。

 table { float: left; }
プロパティ名説  明
float noneフロートさせない(初期値)
left 表を左に配置し、テキストなどを右側に回り込ませる
right 表を右に配置し、テキストなどを左側に回り込ませる
* フロートを指定する場合は、「回り込みを解除する」もご覧下さい。
フロートを指定するタグ(要素)には、widthプロパティで幅を指定しておく必要があります。

 ★ 使用例とブラウザでの表示 (g5-1)スタイルシートの書き方(基本)は、こちら です。
設定例 : .g5-1le { float: left; width: 125px; margin-right: 4px; }
.g5-1ri { float: right; width: 125px; }
使 用 例   ブラウザの表示
<table class=g5-1le border=1>
<tr><th>見出しセル左</th></tr>
<tr><td>データセル左</td></tr>
</table>表を左側に<br>配置します。
見出しセル左
データセル左
表を左側に
配置します。
<table class=g5-1ri border=1>
<tr><th>見出しセル右</th></tr>
<tr><td>データセル右</td></tr>
</table>表を右側に<br>配置します。
見出しセル右
データセル右
表を右側に
配置します。
表を横に並べます。<br>
<table class=g5-1le border=1>
<tr><th>見出しセル左</th></tr>
<tr><td>データセル左</td></tr>
</table><table border=1>
<tr><th>見出しセル</th></tr>
<tr><td>データセル</td></tr>
</table>

表を横に並べます。
見出しセル左
データセル左
見出しセル
データセル
表を左に配置する場合、margin-right:4px; を指定すると、後続の文字などを空けて表示できます。

関連するページ
HTML タグページ 表に並ぶ文字:表に並ぶ文字の位置を指定する

表の周囲にマージンを入れる(CSS)
margin: *px;
 margin は、全てのタグ(要素)に適用できます。ただし、table要素、caption要素以外の表関連要素には適用できません。

 margin は、上下左右のマージン(外側の余白)をまとめて指定するプロパティです。このプロパティを<table>タグ(要素)に設定すると、表の周囲にマージンを入れることができます。

 table { margin: 5px 10px; }
プロパティ名説  明
margin 数値+単位(px 等) or パーセント マージンの大きさを指定
 指定方法
 次の4タイプの指定方法があります。それぞれの値は、半角スペースで区切ります。
@ margin: 2px; … 「上下左右」をまとめて指定
A margin: 2px 3px; … 「上下」と「左右」を指定
B margin: 2px 3px 4px; … 「上」、「左右」、「下」を指定
C margin: 2px 3px 4px 5px; … 「上」、「右」、「下」、「左」を指定(時計回り)

 ★ 使用例とブラウザでの表示 (g5-2)スタイルシートの書き方(基本)は、こちら です。
設定例 : .g5-2mar { margin: 0 15px 0 0; float: left; }
使 用 例   ブラウザの表示
<table style="float:left;" border=1>
<tr><th>見出しセル</th></tr>
<tr><td>データセル</td></tr>
</table>マージン無し:<br>表を左側に
<br>配置します。
見出しセル
データセル
マージン無し:
表を左側に
配置します。
<table class=g5-2mar border=1>
<tr><th>見出しセル</th></tr>
<tr><td>データセル</td></tr>
</table>マージン15px:<br>表を左側に
<br>配置します。
見出しセル
データセル
マージン15px:
表を左側に
配置します。
margin: 0 15px 0 0; margin-right: 15px; と同じ指定です。
この使用例では、フロートの指定と組み合わせています。

関連するページ
HTML タグページ 表周囲の余白:表の周囲にスペース(余白)を入れる

回り込みを解除する(CSS)
clear: both;
 clear は、ブロックレベルのタグ(要素)に適用できます。

 clear は、テキストなどの回り込みを解除するプロパティです。このプロパティは、floatプロパティによる回り込みを解除する場合に使用します。

 .exam { clear: left; }
プロパティ名説  明
clear none回り込みを解除しない(初期値)
left左フロートの回り込みを解除
right右フロートの回り込みを解除
both左右の回り込みを解除
clearプロパティは、ブロックレベルの要素に対して指定します。<br>タグに指定した場合でも回り込みを解除できますが、<br>タグはインライン要素のため、文法的には誤った使い方となります。

 ★ 使用例とブラウザでの表示 (g5-3)スタイルシートの書き方(基本)は、こちら です。
設定例 : .g5-3cl { clear: both; }   .g5-3le { float: left; margin-right: 4px; }
使 用 例   ブラウザの表示
<table class=g5-3le border=1>
<tr><th>見出しセル</th></tr>
<tr><td>データセル</td></tr></table>
表を左側に配置:<br>回り込みの解除は、
<div class=g5-3cl>clear を使用します。</div>
見出しセル
データセル
表を左側に配置:
回り込みの解除は、
clear を使用します。
<div class=g5-3cl>は、<br class=g5-3cl>と記述しても、回り込みを解除できます。

関連するページ
HTML タグページ 回り込み解除:文字の回り込みを解除する

表のフロート(浮動化) 表周囲のマージン回り込み解除 テーブルcss リファレンス へ