HTML4.0の基本

テーブルの効果的な使い方

トラブルQQ

 ま、ホームページ製作会社でもないかぎり、そんなに悩む必要はないけどね。そんなわけで、ちょっとホームページをつくっちゃおうかな、という人は、軽い気持ちで読んでね。

テーブルコンテンツになにも記入しないとセルがつぶれてしまいます。とにかく例をみてみてください。

文字列あり  
  文字列あり

ソースコード

<TABLE border=1>
<TD bgcolor=#FFFFFF>文字列あり</TD><TD bgcolor=#FFFFFF></TD><TR>
<TD bgcolor=#FFFFFF></TD><TD bgcolor=#FFFFFF>文字列あり</TD>
</TABLE>

このようなときは全角のスペースを<TD></TD>の間に入れてあげましょう。するとセルがきちんと表示されます。

文字列あり  
  文字列あり

ソースコード

<TABLE border=1>
<TD bgcolor=#FFFFFF>文字列あり</TD><TD bgcolor=#FFFFFF> </TD><TR>
<TD bgcolor=#FFFFFF> </TD><TD bgcolor=#FFFFFF>文字列あり</TD>
</TABLE>


効果的なテーブルの使用方法

テーブルへイメージを組み込む

テーブルの中にはテキストばかりでなく、イメージも組み入れることができます。これにはテキストの代わりに<TD></TD>タグに<IMG>タグをネスティングします。
次の例では、左側の列に、上から順にwnew1.gif,wnew2.gif,wnew3.gifの各イメージが入ります。ここではイメージは同じディレクトリにある物としています。

いかに簡単なサンプルを示します。

<TABLE border>
<TD><IMG src="wnew1.gif"></TD>
<TR>
<TD><IMG src="wnew2.gif"></TD>
<TR>
<TD><IMG src="wnew3.gif"></TD>
<TR>
</TABLE>

この出力結果は、

となります。

関連記事