HTML CSS 講座 トップページへ

ホームページ作成 いまさらHTML,CSS講座
|  Home  |  ホームページ作成の知識  |  HTML 講座  |  HTML TABLE 講座  |  スタイルシート(CSS) 講座  |  携帯サイト 作成 講座  |
[HTMLテンプレートカテゴリ] [未分類カテゴリ]

いまさらHTML,CSS講座トップ > HTML4.01 TABLE 講座インデックス > テーブル table 表示位置
様々なブックマークサービスがご利用頂けます。

テーブル　表の表示位置

■ align 属性　table要素での指定
table要素に指定した場合、表の配置を指定します。
値
  • left (表示領域の左揃えで表示)
  • center (表示領域の中央揃えで表示)
  • right (表示領域の右揃えで表示)
テーブルの後にテキストをなどを記述した場合、値の left では、テーブルの右側にテキストが回り込み、right では、テーブルの左側にテキストが回り込みます。
値の center を指定した場合、後に続くテキスト等は改行され、テーブルのみ表示領域でセンタリングされて表示されます。
ソース  ソース　基本

表を左側に配置

<table width="120" height="70" align="left">
　<tr><td>1972</td></tr>
</table>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
表示  表　示
※div 要素で、横幅250ピクセルの表示領域が指定してあります。
■ 回り込みの解除　clear属性
br 要素に、clear属性を指定する事で指定された内容の回り込みを解除します。
値
  • none (回り込み(フロート)を解除しません )
  • left (align="left" を解除します)
  • right (align="right" を解除します)
  • all (left、right 両方解除します)
ソース  ソース　基本

表を左側に配置

<table width="120" height="70" align="left">
　<tr><td>1972</td></tr>
</table>○○○○○○○○○○○○○○○○○○○○○○○○○○○<br clear="right">☆☆☆☆☆
表示  表　示
※div 要素で、横幅250ピクセルの表示領域が指定してあります。
 代替指定
align属性は、非推奨要素のため、テーブルに続く内容の左右の回り込みを指定する場合は、floatプロパティで、代替指定し、表示領域に対して左右、中央揃えとして表示させる場合には、marginプロパティで代替指定することが推奨されています。
また、clear属性も、非推奨要素なので、clearプロパティで代替指定する事が推奨されています。
ソース  ソース　表を右側に配置　後に続くテキストなし

<table width="120" height="60" align="right">
　<tr><td>1972</td></tr>
</table>

表示  表　示
※div 要素で、横幅120ピクセルの表示領域が指定してあります。

テーブル　表の表示位置　スタイルシート
■ floatプロパティ
floatプロパティで、テーブルに続く内容の左右の回り込みを代替指定する事ができます。
floatプロパティは、要素のボックスを左、または右に配置し、反対側に、要素に続く内容を表示させます。この一連の表示方法は、『 回り込み 』と言い換える事ができます。
値
  • none (回り込み(フロート)しない)
  • left 
    (要素のボックスを左揃え、続く内容が右から回り込みます。)
  • right 
    (要素のボックスを右揃え、続く内容が左から回り込みます。)
ソース  ソース　基本

表を左側に配置

<table style="width : 120 ; height : 70 ; float : left ; ">
　<tr><td>1972</td></tr>
</table>○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○
表示  表　示
※div 要素で、横幅250ピクセルの表示領域が指定してあります。
 widthプロパティ
置換要素( img要素、input要素、object要素、select要素、textarea要素 )以外の要素で、フロートを指定する場合、width属性で、要素の幅を指定する必要があります。
■ 回り込みの解除　clearプロパティ
floatプロパティで指定された内容の回り込みを解除します。
値
  • none (回り込み(フロート)を解除しません )
  • left (float : left を解除します)
  • right (float : right を解除します)
  • both (left、right 両方解除します)
ソース  ソース　表を左側に配置、回り込み解除、まとめ指定

head要素内に記述

<style type="text/css">
<!--
.float { float : left ; width : 120 ; height : 70 ; }
.clear { clear : both ; text-align : center ; }
-->
</style>

body要素内に記述

<table class="float">
　<tr><td>1972</td></tr>
</table>○○○○○○○○○○○○○○○○○○○○○○○○○○○<div class="clear">☆☆☆☆☆</div>
表示  表　示
※div 要素で、横幅250ピクセルの表示領域が指定してあります。
 豆知識
時折、br 要素に CSSの clearプロパティを指定して回り込みを解除しているソースを拝見する事があります。
しかしながら、clearプロパティは、仕様の上では ブロック要素 に対して指定するプロパティなので、文法上誤りとされます。
div 要素や、p 要素などのブロック要素に指定するようにしましょう。
HTMLの clear属性と混同しないようご注意下さい。
■ marginプロパティ

内容領域、マージン、パディング、ボーダーのイメージ
marginプロパティで、table要素を表示領域に対して左右、中央揃えとして表示する指定ができます。
marginプロパティは、上下左右のマージン領域（上図参照）を指定します。
最も外側の領域で、他の要素との境となる領域です。
値は、%（パーセント）や、長さで指定します。また、まとめの値の指定は、半角スペースで区切ります。
ソース  値のまとめ指定
margin: の引数は 1〜4個指定が可能で、それぞれ、下のように解釈されます。
margin: 1px 2px 3px 4px ;
margin: 1px 2px 3px ;
margin: 1px 2px ;
margin: 1px ;		 上 1px、右 2px、下 3px、左 4px
上 1px、左右 2px、下 3px
上下 1px、左右 2px
上下左右 1px
表示  上下左右のマージンを個別に指定する場合
margin-top: 2px ;
margin-bottom: 2px ;
margin-right: 2px ;
margin-left: 2px ; 		上辺に 2pxの余白
下辺に 2pxの余白
右辺に 2pxの余白
左辺に 2pxの余白

(C) いまさらHTML CSS講座 2002-2008 All right reserved