TABLE タグを活かす(2)


TABLE タグで border 値を指定しない場合、つまり border=0 と同じ場合には枠が表示されないことを述べました。 この場合、TABLE タグは表というよりはページのレイアウトのために用いられます。
例えば文をページの中央に書く場合、短い文なら DIV align="center" を指定して、

<DIV align="center">梅ちゃん堂へようこそ!</DIV>

梅ちゃん堂へようこそ!

とすればよいのですが、もし長い文章だと、

<DIV align="center">
TABLE タグは HTML のタグの中でも特に用途の広いタグの1つです。 TABLE とはこの場合、英語の「表」(「食卓」じゃないよ)から来ていて、文字列や画像などを表のようにバランスよく配分したり、実際に罫線のついた表を作ることもできます。ここではその使い方を実験してみます。
</DIV>

は、

TABLE タグは HTML のタグの中でも特に用途の広いタグの1つです。 TABLE とはこの場合、英語の「表」(「食卓」じゃないよ)から来ていて、文字列や画像などを表のようにバランスよく配分したり、実際に罫線のついた表を作ることもできます。ここではその使い方を実験してみます。

となって、おかしなことになります。

これを避けるために <DIV align="center"> の代わりに BLOCKQUOTE タグを重複させて、

<BLOCKQUOTE>
<BLOCKQUOTE>
<BLOCKQUOTE>
<BLOCKQUOTE>
TABLE タグは HTML のタグの中でも特に用途の広いタグの1つです。 TABLE とはこの場合、英語の「表」(「食卓」じゃないよ)から来ていて、文字列や画像などを表のようにバランスよく配分したり、実際に罫線のついた表を作ることもできます。ここではその使い方を実験してみます。
</BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>
</BLOCKQUOTE>

TABLE タグは HTML のタグの中でも特に用途の広いタグの1つです。 TABLE とはこの場合、英語の「表」(「食卓」じゃないよ)から来ていて、文字列や画像などを表のようにバランスよく配分したり、実際に罫線のついた表を作ることもできます。ここではその使い方を実験してみます。

とする方法もありますが、TABLE タグならもっとスマートで便利な使い方ができます。

<DIV align="center">
<TABLE width="60%">
<TR>
<TD> TABLE タグは HTML のタグの中でも特に用途の広いタグの1つです。 TABLE とはこの場合、英語の「表」(「食卓」じゃないよ)から来ていて、文字列や画像などを表のようにバランスよく配分したり、実際に罫線のついた表を作ることもできます。ここではその使い方を実験してみます。
</TD>
</TR>
</TABLE>
</DIV>

TABLE タグは HTML のタグの中でも特に用途の広いタグの1つです。 TABLE とはこの場合、英語の「表」(「食卓」じゃないよ)から来ていて、文字列や画像などを表のようにバランスよく配分したり、実際に罫線のついた表を作ることもできます。
ここではその使い方を実験してみます。

width は TABLE の幅を表していて、数値に%を付けた場合には画面全体の幅に対する TABLE 幅の割合を示しています。 もし絶対値を指定したいのであれば、%をとって width="450" のようにすれば、画面に関係なく一定のピクセル数で表示することができます。 BLOCKQUOTE などを使った場合と違い、1行の長さを細かく指定できるメリットもあります。更に、TABLE をうまく配置することで雑誌のようなレイアウトも可能になるわけです。

下の例では TD を2つ使い、それぞれ幅を width="43%" に指定しています。

<DIV align="center">
<TABLE cellspacing=20>
<TD width="43%" valign="top"><STRONG>TABLE タグを活かす</STRONG><P>TABLE タグは、...実験してみます。 </TD>
<TD width="43%" valign="bottom">width は TABLE の幅を表していて、...メリットもあります。</TD>
</TABLE>
</DIV>

TABLE タグを活かす TABLE タグは HTML のタグの中でも特に用途の広いタグの1つです。 TABLE とはこの場合、英語の「表」(「食卓」じゃないよ)から来ていて、文字列や画像などを表のようにバランスよく配分したり、実際に罫線のついた表を作ることもできます。ここではその使い方を実験してみます。 width は TABLE の幅を表していて、数値に%を付けた場合には画面全体の幅に対する TABLE 幅の割合を示しています。 もし絶対値を指定したいのであれば、%をとって width="450" のようにすれば、画面に関係なく一定のピクセル数で表示することができます。 BLOCKQUOTE などを使った場合と違い、1行の長さを細かく指定できるメリットもあります。

この場合、TABLE を2つ並べてそれぞれ align=left, align=right としてもうまく行きそうな気もしますが、実際にやってみると左右のバランスがうまくとれなかったり、(特に Internet Explorer の場合)画面に収まりきれずに右の TABLE が改行されたりします。

Netscape と Internet Explorer は画面表示に著しい違いはないように思われますが、こと TABLE タグを使った場合にはかなり違いがでてくるので注意が必要です。下の例を見て下さい。 左右の余白をとるために BLOCKQUOTE タグの中で文章を書いていて、その中で TABLE を使ってみました。ところが TABLE の左は正しく余白がとれているのに、右はとれていません。 あなたが Internet Explorer で見ているなら、TABLE の中の文章が画面から右にはみ出しているはずです。Netscape の場合には画面の中に収まりますが、右余白はやはりうまくとれていません。

TABLE タグを活かす width は TABLE の幅を表していて、数値に%を付けた場合には画面全体の幅に対する TABLE 幅の割合を示しています。 もし絶対値を指定したいのであれば、%をとって width="450" のようにすれば、画面に関係なく一定のピクセル数で表示することができます。 BLOCKQUOTE などを使った場合と違い、1行の長さを細かく指定できるメリットもあります。

この場合には width= で TABLE の幅を強制的に指定すれば、問題解決します。(下は width="90%" の場合。)

TABLE タグを活かす width は TABLE の幅を表していて、数値に%を付けた場合には画面全体の幅に対する TABLE 幅の割合を示しています。 もし絶対値を指定したいのであれば、%をとって width=450 のようにすれば、画面に関係なく一定のピクセル数で表示することができます。 BLOCKQUOTE などを使った場合と違い、1行の長さを細かく指定できるメリットもあります。

ところで Netscape や Internet Explorer で日本語を表示させると行間が詰まって見づらいと思うこと、ありますね。 1行ごとに改行するという手もありますが、ちょっとしまりがなくなります。そこで裏技。

<DIV align="center">
<TABLE>
<TR><TD>width は TABLE の幅を表していて、数値に%を付けた場合には画面全体の幅に対する TABLE 幅の割合を</TD></TR>
<TR><TD>示しています。もし絶対値を指定したいのであれば、%をとって width="450" のようにすれば、画面に関係なく</TD></TR>
<TR><TD>一定のピクセル数で表示することができます。</TD></TR>
<TR><TD>BLOCKQUOTE などを使った場合と違い、1行の長さを細かく指定できるメリットもあります。</TD></TR>
</TABLE>
</DIV>

width は TABLE の幅を表していて、数値に%を付けた場合には画面全体の幅に対する TABLE 幅の割合を
示しています。もし絶対値を指定したいのであれば、%をとって width=450 のようにすれば、画面に関係なく
一定のピクセル数で表示することができます。
BLOCKQUOTE などを使った場合と違い、1行の長さを細かく指定できるメリットもあります。

まるで本のような自然な改行ピッチになりましたね。これはつまり各行を TABLE のセル内に入れることによってセル間の幅で行間をとっているわけです。 一行が改行されない程度の長さになるように、また各行の長さが一致するように注意する必要があります。 何十行にも及ぶような長い文章ではこんなことはやってられませんが、ここぞという短い文章の時は使ってみる価値はあります。 (Netscape 4.0 以上や Internet Explorer で見ている方は「あまり違わないよ」と思うかも知れませんが、この方法はスタイルシートをサポートしていないブラウザでも有効です。)




次のトピックは「カレンダーを作る(1)」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで