ホームページ作成(表を使いたい)
無料!発信中!メール情報誌!

ホームページ作成しよう!
HTML〜スタイルシート

ホームページ作成TOP > テーブル > テーブルに文章を回り込ませる

テーブルに文章を回り込ませる

テーブルに文章を回り込ませ、テーブルとの位置関係を調整する方法です。

sample

(1)右寄せの場合

見出見出
セルセル

テーブルを右寄せにして、文章をテーブルの左側にしてます。テーブルを右寄せにして、文章をテーブルの左側にしてます。テーブルを右寄せにして、文章をテーブルの左側にしてます。テーブルを右寄せにして、文章をテーブルの左側にしてます。テーブルを右寄せにして、文章をテーブルの左側にしてます。テーブルを右寄せにして、文章をテーブルの左側にしてます。

(2)左寄せの場合

見出見出
セルセル

テーブルを左寄せにして、文章をテーブルの右側にしてます。テーブルを左寄せにして、文章をテーブルの右側にしてます。テーブルを左寄せにして、文章をテーブルの右側にしてます。テーブルを左寄せにして、文章をテーブルの右側にしてます。テーブルを左寄せにして、文章をテーブルの右側にしてます。テーブルを左寄せにして、文章をテーブルの右側にしてます。

(3)中央寄せの場合

見出見出
セルセル

中央寄せの場合には、文章が下になります。中央寄せの場合には、文章が下になります。中央寄せの場合には、文章が下になります。中央寄せの場合には、文章が下になります。中央寄せの場合には、文章が下になります。

HTML <table align="方向">

テーブルの表示する場所を指定する方法です。

テーブル(<table>)に対してalign="方向"を設定する事で、表示位置を調整できます。以下が方向になります。

タグ意味
<table align="right">右寄せ
<table align="left">左寄せ
<table align="center">中央寄せ

下記は、『右寄せ』で『テーブルの幅を200px』の場合になります。また文章を長くした方が理解しやすいと思います。

書き方は

<table border="1" align="right">
<tr><th>見出</th><th>見出</th></tr>
<tr><td>セル</td><td>セル</td></tr>
</table>
<p>テーブルを右寄せにして、文章をテーブルの左側にしてます。</p>
こうなります
IE
IE
Firefox
Opera

ホームページ作成TOP > テーブル > テーブルに文章を回り込ませる > このページのTOP ▲

スタイルシート float:方向

テーブルと文章の表示場所をスタイルシートで指定するには<table>に対してfloat:方向を指定します。

方向意味
right右寄せ
left左寄せ
noneなし

中央に寄せる場合には、テーブルを表示する(中央)を参照願います。

下記は、『右寄せ』で『テーブルの幅を200px』の場合になります。また文章を長くした方が理解しやすいと思います。

要素に直接書く
書き方は

<table border="1" width="200" style="float:right">
<tr><th>見出</th><th>見出</th></tr>
<tr><td>セル</td><td>セル</td></tr>
</table>
<p>テーブルを右寄せにして、文章をテーブルの左側にしてます。</p>
headに書く
書き方は

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
  <head>

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">

 <style type="text/css">
 <!--

        table   { float:right;}

 -->
 </style>
 </head>
 <body>

        <table border="1" width="200">
        <tr><th>見出</th><th>見出</th></tr>
        <tr><td>セル</td><td>セル</td></tr>
        </table>
        <p>テーブルを右寄せにして、文章をテーブルの左側にしてます。</p>

 </body>
</html>
こうなります
IE
IE
Firefox
Opera

ホームページ作成TOP > テーブル > テーブルに文章を回り込ませる > このページのTOP ▲