【予約販売】TVショッピングでおなじみの乗馬ダイエットマシーン
「ロデオボーイ」が なんと2万円! しかも送料無料!

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

<table align="○"> 〜 </table>

tableタグに alignの属性を設定すると、テーブルの位置を 左、中央、右に
配置することができます。left や right を指定したときは、テーブルに
続くテキストが回り込まれて表示されます。

デフォルトの設定は align="left" なんですが、この指定をしないと 
テキストが回り込みしてくれませんので きちんと指定するようにしましょう。

 

 align="left" の場合

mamoho おとうさん
大輔 おにいちゃん
奈美 いもうと

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" を 指定しなかった場合はこうなります。

mamoho おとうさん
大輔 おにいちゃん
奈美 いもうと

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

 

 

 align="right" の場合

mamoho おとうさん
大輔 おにいちゃん
奈美 いもうと

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" の場合、

mamoho おとうさん
大輔 おにいちゃん
奈美 いもうと

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

 

 

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

当ホームページは リンクフリーです! 
Copyright (C) 2004. mamoho. All Rights Reserved.
掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます。