サイト内検索
...スタイルシート(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>No1</th>
<th>No2</th>
</tr>
<tr>
<td>No3</td>
<td>No4</td>
</tr>
</table>
テーブルの右側に
テキストを表示してみます
<p style="clear:left;">ーーー回り込みを解除しますーーー</p>
<table class="sample2">
<tr>
<th>No1</th>
<th>No2</th>
</tr>
<tr>
<td>No3</td>
<td>No4</td>
</tr>
</table>
テーブルの左側に
テキストを表示します
<p style="clear:right;">ーーー回り込みを解除しますーーー</p>
[ブラウザ上]
テーブルの右側に テキストを表示します --- 回り込みを解除 ---
テーブルの左側に テキストを表示します --- 回り込みを解除 --- |