サイト内検索

...スタイルシート(css)...

スタイルシート・table

回り込みを指定

回り込みさせるには、floatプロパティを指定します。
[使い方]
table.sample{
border: 1px #999999 solid;
float: left;
}
プロパティ名 説明
float: left; 表を左に配置・テキストなどを右側に回り込ませます。
right;表を右に配置・テキストなどを左側に回り込ませます。
none;指定なし

回り込みを解除

回り込みを終了させるにはclearプロパティを指定します。
[使い方]
<p style="clear: left;">
プロパティ名 説明
clear: left;表の右側にある回り込みを解除します。
right;表の左側にある回り込みを解除します。
both;どちらの回り込みも解除します。
none;指定なし(標準値)

サンプル

[headの中]

<style type="text/css">
<!--
table.sam1{
border: 1px #999999 solid;
float: left;
}
table.sam2{
border: 1px #999999 solid;
float: right;
}
th,td{
border: 1px #999999 solid;
}
-->
</style>

[bodyの中]

<table class="sample1">
<tr>
<th>No</th>
<th>No</th>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
</table>
テーブルの右側に
テキストを表示してみます
<p style="clear:left;">ーーー回り込みを解除しますーーー</p>
<table class="sample2">
<tr>
<th>No</th>
<th>No</th>
</tr>
<tr>
<td>No</td>
<td>No</td>
</tr>
</table>
テーブルの左側に
テキストを表示します
<p style="clear:right;">ーーー回り込みを解除しますーーー</p>

[ブラウザ上]

NoNo
NoNo

テーブルの右側に
テキストを表示します

--- 回り込みを解除 ---

NoNo
NoNo

テーブルの左側に
テキストを表示します

--- 回り込みを解除 ---


Copyright c 2007.10.01 luc All rights reserved.