表を使ったレイアウト

複数画像やテキスト文を境界線幅ゼロの多行多列の表に挿入することにより、ページ全体をレイアウトできます。
この手法はホームページの世界では広く行なわれています。
その場合のコツは　

• あるセルに大きな画像を入れると、隣のセルがその影響を受けてセル幅が必要以上に拡大してレイアウトが崩れる場合がある。
  その場合は、 拡大して困るセルに１行２列あるいは2行1列の表を入れ子にすると解決する。
• 行を追加すると必要のない隣の列にまで行が挿入される。　その場合も入れ子にした表に行を追加すれば隣に影響しない。
• このように、 セルの中に１行２列あるいは2行1列の表を入れ子にして、 さらにその中にまた・・・・という具合に、少ない行、列のサイズ指定の表を次々に入れ子にしていくとレイアウトはうまくいくようです。　
  

  タイトル メニュー メニュー1 メニュー2 メニュー3 メニュー4 メニュー5   お知らせ トピックス 画像1 案内 画像2 メール 画像3

  左の例は表の境界幅「1」の表示にしています。 境界幅「0」にすれば表枠は非表示になります。

• 表を数多く使う場合、区別するために　<table id="03"　width="873" >　</table id="03">　のように id番号をつけておくとよい。
• 表の高さで隙間を指定するには：　<td height="9" bgcolor="#FFFFFF"></td>　

大型液晶の普及で閲覧画面幅はいろいろあるし、老眼の人は文字の大きさを「大」にしている場合が多い。 文字の大きさを「大」に設定すると、文字の大きさは大きくなるが画像の大きさは変わらない。 その結果、文章と画像の相対位置関係は閲覧者によって大きく変わることがある。 何枚もの写真が入った紀行文の場合、レイアウトに注意しないと本文とは無関係の位置に写真が入った状態で閲覧することも生じる。 いろいろな閲覧環境においても文と画像の相対位置関係があまりズレないようにするためには指定表枠内に文章を入れればよい。　ただし表幅を広くとりすぎると表内文書が画面右からはみだし、横スクロールしないと見えなくなる。 これを防ぐには、 閲覧者の画面最小幅は、１５インチ液晶で左に「お気に入りメニュー」がある場合と想定して表幅を800ピクセル以下程度にすればいい。 このように１行１列の表を利用すれば文字サイズや画面幅が少々変わっても相対位置関係は大きく崩れることはない。 さらに、厳密にする場合は表内の適当な位置で改行し、表内全体を「折り返し禁止」にすれば改行位置も文字の大きさに関わらず一定になる。　ただし改行位置まで指定すると少々見苦しくなる。

この枠内は、文字の大きさを変えても表幅が拡大するので改行位置は変わらない。　したがって、 文章と画像 の相対位置関係はかなり厳密に保たれる。　ただし行右側は不揃いになる。 preformat 指定した場合も、表幅よりも改行位置が優先されて表幅が拡大する。 DreamWeaver ではpreformatが自動挿入されることがあるのでコード編集で削除すべし。 大型液晶の普及で閲覧画面幅はいろいろあるし、老眼の人は文字の大きさを「大」にしている 場合が多い。 文字の大きさを「大」に設定すると、文字の大きさは大きくなるが画像 の大きさは変わらない。 その結果、文章と画像の相対位置関係は閲覧者によって大きく変わ ることがある。 何枚もの写真が入った紀行文の場合、レイアウトに注意しないと本文 とは無関係の位置に写真が入った状態で閲覧することも生じる。 いろいろな閲覧環境においても文と画像の相対位置関係があまりズレ ないようにするためには指定表枠内に文章を入れればよい。ただし表幅を広くとりすぎると表内 文書 が画面右からはみだし、横スクロールしないと見えなくなる。 これを防ぐには、閲覧者の画面最小幅は、１５インチ液晶で左に 「お気に入りメニュー」がある場合と想定して表幅を800ピクセル以下 程度にすればいい。 このように１行１列の表を利用すれば文字サイズや画面幅が少々 変わっても相対位置関係は大きく崩れることはない。 さらに、厳密にする場合は表内の適当な位置で改行し、表内全体を 「折り返し禁止」nowrap にすれば改行位置も文字の大きさに関わらず一定になる。 ただし改行位置まで指定すると少々見苦しくなる。

この表枠内を Internet Explorerで、文字サイズ「大」にして閲覧してください。 Internet Explorer の場合は 文字サイズは変化しないことが分かります。 閲覧者がブラウザの設定で文字サイズを「大」にすると、文字表示は大きくなるが 画像の大きさは変わらない。　 その結果、文章と画像 の位置バランスが変わり、 レイアウトに影響する。 あるいは、表枠が拡大してレイアウトに影響することもある。 特に Homepage Builder の「どこでも配置モード」や「スライス処理」で作成した レイアウトは位置関係が微妙に崩れる。 これを防止する方法として、閲覧者による文字サイズ「大」の指定を無効にする方法がある。 方法：　スタイルシートで、文字サイズをpixcel で指定する。 ただし、この方法は Internet Explorer にしか有効ではない。　他のブラウザでは無効である。 この手法は 文字サイズを「大」にしないと見えない閲覧者に対して、いささか配慮に欠ける が、凝ったレイアウトの表紙には多く使われている。

例：　table内の文字を中央にする。
<table>
<tbody align center> 　
<tr><td>　〜　 </td></tr>
</tbody>
</table>

***************
<td> で指定してもよい。
例：
<td width="448" align="center">　〜　</td>

<td bgcolor="#FFFFFF" id="03"　width="873" align="center">　〜　</td>

<td width="865" height="825" valign="top">　〜　</td>

ホームページビルダーで表を使うレイアウトとしては以下の２つの方法がある。

• 挿入→レイアウト枠　で、スタイルシートのレイアウト枠（Div)を指定し、その中に表を入れる方法、および
• 編集→スタイリッシュエフェクト　で、表を使ったレイアウトのテンプレートを利用する。　→　例はここ
  最新のHB12では、新たに「かんたんページ作成モード」ができて スタイリッシュエフェクトを使ったテンプレートがさらに充実したようです。

・表の各種加工　　超初心者のためのホームページ作成講座

｜　ホームページ作成体験メニューに戻る　｜