table要素とalign属性(非推奨)

表示領域内での表の表示位置を指定します。

値)

テーブルの後にテキストをなどを記述した場合、値のleftはテーブルの右側にテキストが回り込み、rightはテーブルの左側にテキストが回り込みます。また、値のcenterを指定した場合、後に続くテキスト等は改行されテーブルのみ表示領域でセンタリングされて表示されます。

表を左に表示 例)

<div>
<table align="left">
<tr><td>1972</td><td>1973</td></tr>
</table>
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
<br clear="all">
</div>

table要素,align属性,left

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

表を右に表示 例)

<div>
<table align="right">
<tr><td>1972</td><td>1973</td></tr>
</table>
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
<br clear="all">
</div>

table要素,align属性,right

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

※代替指定
テーブルに続く内容の左右の回り込みを指定する場合のalign属性はfloatプロパティで代替指定する事が推奨されています。

例)

float: left;

clear属性

br要素にclear属性を指定し内容の回り込みを解除します。

値)

例)

<div>
<table align="left">
<tr><td>1972</td><td>1973</td></tr>
</table>
○○○○○○○○○○○<br clear="all">○○○○○○○○○○○○○○○○○○○○○○
</div>

table要素,align属性,left

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

※代替指定
スタイルシートのclearプロパティで代替指定する事が推奨されています。

例)

clear: both;

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

<div>
<table align="center">
<tr><td>1972</td><td>1973</td></tr>
</table>
○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
</div>

table要素,table要素,align属性,right

※親要素に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;を指定します。

親要素)

text-align: center;

table要素)

margin: auto;
text-align: left;


ページトップへ戻る



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


inserted by FC2 system