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

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

{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>
文字

■ その他の項目

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

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

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

HOME

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