●　align="left"　の場合

align　の属性を使ってテーブルの位置をを左に指定してみました。　この場合　テーブルが左側に、テキストが右側に表示されます。　文章がながくなってくると、テキストがそのまま下側に回り込んで表示されていきます。　ちなみにデフォルトの指定は　align="left"　なんですが、この指定をやっていないと　テキストは回り込んでくれません。　ですからこれを利用する場合はきちんと指定するようにしてください。　また　HTML4.01　の規定では　alignの属性を使わず　その代わりにスタイルシートを利用することを推奨しています。

<table width="300" border="1" align="left"> <tr> <td width="100">mamoho</td> <td>おとうさん</td> </tr> <tr> <td>大輔</td> <td>おにいちゃん</td> </tr> <tr> <td>奈美</td> <td>いもうと</td> </tr> </table> <p>align の属性を使ってテーブルの位置を左に指定してみました。 ・・・・・・・</p>

 

●　ちなみに　align="left"　を　指定しなかった場合はこうなります。

今回は　alignの属性はつかわず　そのままテキストを書き連ねています。見ての通りテーブルはそのまま左側に表示されていますが、テキストはテーブルの下側になってしまいました。指定した場合と　指定しなかった場合の違いが理解できたでしょうか？

●　align="right"　の場合

align　の属性を使ってテーブルの位置を右に指定してみました。今度はテキストが左側に　テーブルは右側に表示されているのがわかりますね。こちらも文章がながくなってくると、テキストがそのままテーブルの下へつづいて表示されていきます。　ちなみにテキストの回り込みを解除したい場合は、brタグの　clear属性を使用します。　今見ている状態で　テキストが回り込んでいない場合は　ウィンドウのサイズを変更して　横幅を小さくしてみましょう。　ちゃんとテキストがまわりこんでるのが確認できるはずです。

<table width="300" border="1" align="right"> <tr> <td width="100">mamoho</td> <td>おとうさん</td> </tr> <tr> <td>大輔</td> <td>おにいちゃん</td> </tr> <tr> <td>奈美</td> <td>いもうと</td> </tr> </table> <p>align の属性を使ってテーブルの位置を右に指定してみました。 ・・・・・・・</p>

 

●　align="center"　の場合、

align　の属性を使ってテーブルの位置を中央に指定してみました。　今度はテーブルが中央に表示され、テキストはその下に表示されていますね。　left　や　right　と違って回り込みはありません。

ホームページは難しくない　　ちょこっとHTML　　Lesson7