テーブルの横に文字を回り込ませる

{float:位置;}でテーブルの表示位置を指定することが出来ます。テーブルに回り込む文字はテーブルの表示位置とは逆の位置に表示されます。この指定をすることでテーブルの横にテーブルや画像なども並べることができます。

回り込んだ文字はイメージの項、ボックスの項と同様に<br clear="all"> か{clear:both;}で解除できます。

■ テーブルの表示位置

テーブルを表示できる位置は以下のとおりです。

位置	説明
none	テーブルの表示位置は指定しません。（デフォルト）
left	テーブルが左に表示され文字(テキスト)が右に回り込みます。
right	テーブルが右に表示され文字(テキスト)が左に回り込みます。

【ブラウザ表示】

テーブルが左で文字が右に来てます。

文字

回り込みが解除されました。

テーブルが右で文字が左に来てます。

文字

ソース

<table class="sample12">
<tr>
<td>テーブルが左で文字が右に来てます。</td>
</tr>
</table>
文字
<p class="cr1">回り込みが解除されました。</p>
<table class="sample13">
<tr>
<td>テーブルが右で文字が左に来てます。</td>
</tr>
</table>
文字

外部ファイル

table.sample12{
border:1px black solid;
float:left;
}
table.sample13{
border:1px black solid;
float:right;
}
p.cr1{clear:both;}

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

<table style="border:1px black solid; float:left;">
<tr>
<td>テーブルが左で文字が右に来てます。</td>
</tr>
</table>
文字
<p style="clear:both;">回り込みが解除されました。</p>
<table style="border:1px black solid; float:right;">
<tr>
<td>テーブルが右で文字が左に来てます。</td>
</tr>
</table>
文字

Follow @hp_master_2003

■ その他の項目

・枠線の太さ、色、種類を指定する
・枠線を重ねて表示する
・テーブルやセルの幅、高さを指定する
・外側、内側の余白を指定する
・セルの文字の位置を指定する
・テーブルやセルに背景色を指定する
・テーブルやセルに画像を指定する

スタイルシート一覧のページに戻る