中級HTMLリファレンス

自分の思う位置に配置する技術

WEBサイトを作る上で、もっとも大切な事の1つが、自分の思っている位置に思っているものを配置する事です。

CSSで配置する事も可能ですが、まずは<TABLE>タグをマスターしましょう。では、<TABLE>タグとは何か?簡単に言うとMicrosoftエクセルの様なマス目を作る事が出来るのが、この<TABLE>タグです。では、詳しく説明して行こうと思います。

1.テーブルタグをマスターしよう!

前述のように<TABLE>タグは元々は表を作成する為のタグです。しかし、実際はレイアウトに用いられる事が多い、とても大事なタグです。
<TABLE></TABLE>に挟まれた間には、表を作成する為のタグが2種類用意されています。表の行の要素を指定する<TR>〜</TR>タグと列の要素を指定する<TD>〜</TD>タグです。これでは、解り図らいと思いますので図で説明します。

TABLE

上図をみてもらえば少しは解りやすいと思います。
まず罫線で描かれた外枠を作るのが<TABLE>〜</TABLE>タグです。
そして、行を作るのが<TR>〜</TR>タグで上の図の場合縦に3行あるので<TR></TR>は3回書きます。
さらに列を作るのが<TD>〜</TD>タグです。今回の場合、横4列なので、<TR>〜</TR>で挟まれた位置に<TD>〜</TD>を4つずつ記述します。
ですから上図のテーブルをHTMLで書くと以下のようになります。

 <TABLE border="1">
  <TR>
   <TD></TD>
   <TD></TD>
   <TD></TD>
   <TD></TD>
  </TR>
  <TR>
   <TD></TD>
   <TD></TD>
   <TD></TD>
   <TD></TD>
  </TR>
  <TR>
   <TD></TD>
   <TD></TD>
   <TD></TD>
   <TD></TD>
  </TR>
 </TABLE>

どうでしょうか?テーブルという物が理解できたでしょうか?
ここで1つ解説すると<TABLE border="1">のborderというのが線を出す出さないを指定しています。ですから実際に<TD></TD>の中に文字などを配置し、レイアウトを作るのであれば、線はいらないのでborder="0"にします。このようにテーブルをうまく使いこなしながら、文字や画像の配置をしていく訳です。

例えば、上図の左上のマスに”こんにちわ”と文字を出したいなら、一番最初の<TD></TD>を<TD>こんにちわ</TD>とすれば良い訳です。


2.テーブルタグ応用編!

<TABLE>タグでは、エクセルのようにセル同士の連結を行う事も出来ます。
例えば下図のように「縦2マス連結したい」とか「ここは横2マス使いたい」と言う時の<TD>タグの指定のやり方を説明します。

TABLE2

上の赤枠を1つのマス目にしたい時は、colspanと言う属性指定を使い
<TD colspan="2"></TD>と書きます。
さらに青い枠の部分のように縦に枠2マスをつなげて使いたい場合は、rowspanと言う属性を使い<TD rowspan="2"></TD>と記述します。
ですから上図をHTMLで書くと以下のようになります。

 <TABLE border="1">
  <TR>
   <TD></TD>
   <TD colspan="2"></TD>←横2マス連結したので
   <TD></TD>          TDは1つ減ります。
  </TR>
  <TR>
   <TD></TD>
   <TD rowspan="2"></TD>←縦2マス連結
   <TD></TD>
   <TD></TD>
  </TR>
  <TR>
   <TD></TD>
           ←上で2マスつないだのでここのTDは必要なし
   <TD></TD>
   <TD></TD>
  </TR>
 </TABLE>

どうでしょうか?これは便利なので覚えたほうが良いと思います。また、実は<TD>〜</TD>の間には、さらに<TABLE>タグを入れる事が出来ます。これにより微妙な細かい位置にも様々なオブジェクトを配置出来るようになります。<TABLE>タグは使いこなせればどんなレイアウトでも可能にしてくれる素晴らしいタグなので、みなさんも早くマスターしてください。

ブログサイトのランキングは、人気blogランキングがおすすめ!
Posted by webcreate at January 26, 2005-14:54│TrackBack(0)


この記事へのトラックバックURL

サイト製作の基本
HTML関連
BLOG関連
アフェリエイト関連
アクセス向上関連