table要素とfloatプロパティ

floatプロパティは表示領域内での表の表示位置を指定します。

テーブルの後にテキストをなどを記述した場合、値のleftはテーブルの右側にテキストが回り込み、rightはテーブルの左側にテキストが回り込みます。

値)

表を左に表示 例)

<div>
<table style="float: left;">
<tr><td>1972</td><td>1973</td></tr>
</table>
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
<br style="clear: both;" />
</div>

table要素,floatプロパティ,left

※親要素にwidth: 450px;border: 1px solid #c0c0c0;、table要素にwidht: 300px;、td要素にborder: 1px solid #c0c0c0;を指定。

表を右に表示 例)

<div>
<table style="float: right;">
<tr><td>1972</td><td>1973</td></tr>
</table>
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
<br style="clear: both;" />
</div>

table要素,floatプロパティ,right

※親要素にwidth: 450px;border: 1px solid #c0c0c0;、table要素にwidht: 300px;、td要素にborder: 1px solid #c0c0c0;を指定。

floatプロパティ

clearプロパティ

br要素にclearプロパティを指定し内容の回り込みを解除します。

値)

例)

<div>
<table style="float: left;">
<tr><td>1972</td><td>1973</td></tr>
</table>
○○○○○○○○○○○<br style="clear: both;">○○○○○○○○○○○○○○○○○○○○○○
</div>

table要素,floatプロパティ,left

※親要素にwidth: 450px;border: 1px solid #c0c0c0;、table要素にwidht: 300px;、td要素にborder: 1px solid #c0c0c0;を指定。

clearプロパティ

表をセンタリング表示 例)

<div style="text-align: center;">
<table style="margin: auto;text-align: left;">
<tr><td>1972</td><td>1973</td></tr>
</table>
</div>

table要素,センタリング例

※親要素にwidth: 450px;border: 1px solid #c0c0c0;、table要素にwidht: 300px;、td要素にborder: 1px solid #c0c0c0;を指定。

※表示領域に対して左右、中央揃えとして表示させる場合、表示領域でセンタリングするには親要素(例ではdiv要素)にtext-align: center;、text-alignプロパティに未対応(不完全対応)のブラウザ用にtable要素にmargin-leftプロパティ、margin-rightプロパティの値をauto、親要素のtext-alignプロパティでのセンタリングに対してtable要素の内容もセンタリングしてしまうブラウザ用に、text-align: left;を指定します。


ページトップへ戻る



RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system