戻る

テーブルのはなし


テーブルというのは表のことなんですが、私はこれを多用しています。 たとえば、全体を囲んで、左側と右側に分けたりするわけです。 もちろん表として、使うこともあります。 使い方次第でいろいろなことができるのです。 ただし、レイアウトのために使うのって邪道らしいんですが、 本によってはそういうふうにも使えるよって書いてあるので、賛否両論なのかもしれませんが。 それでは、さっそく使ってみましょう。

☆テーブルの基本

<TABLE  BORDER="1">
     <TR>
         <TD>文章１</TD>
         <TD>文章２</TD>
     </TR>
</TABLE>
このように入力するとこうなります。

文章１ 文章２




<TABLE>〜</TABLE>このタグに囲まれた範囲が表であることを示します
    BORDER="1"表の枠線の幅を指定します。０にすると枠線が表示されません
<TR>〜</TR>行を定義するタグです
<TD>〜</TD>セルに入るデータをこの間に書きます




では、このように入力してみると・・・。
<TABLE  BORDER="1">
     <TR>
         <TD>文章１</TD>
         <TD>文章２</TD>
         <TD>文章３</TD>
     </TR>
     <TR>
         <TD>文章４</TD>
         <TD>文章５</TD>
         <TD>文章６</TD>
     </TR>
</TABLE>

こうなります。

文章１ 文章２ 文章３
文章４ 文章５ 文章６




☆テーブルの連結

<TABLE  BORDER="1">
     <TR>
         <TD  ROWSPAN="2">文章１</TD>
         <TD>文章２</TD>
     </TR>
     <TR>
         <TD>文章３</TD>
     </TR>
</TABLE>
このように入力するとこうなります。

文章１ 文章２
文章３




<TABLE  BORDER="1">
     <TR>
         <TD  COLSPAN="2">文章１</TD>
     </TR>
     <TR>
         <TD>文章２</TD>
         <TD>文章３</TD>
     </TR>
</TABLE>
このように入力するとこうなります。

文章１
文章２ 文章３




<TD  LOWSPAN="2">〜</TD>そのセルから指定された数の下方向のセルを連結して一つのセルにすることができます
<TD  COLSPAN="2">〜</TD>そのセルから指定された数の右方向のセルを連結して一つのセルにすることができます




☆その他の指定

<TABLE>
WIDTH="80%"横幅を指定します(ピクセルまたは％）
HEIGHT="300"高さを指定します(ピクセルまたは％）
BORDER="2"枠線の太さを指定します(０にすれば枠無し）
BGCOLOR="#000000"表の背景色を指定します
CELLSPACING="3"セルとセルの間隔を指定します（ピクセル）
CELLPADDING="2"セル内のマージンを指定します（ピクセル）
BACKGROUND="img/item.gif"表の背景画像を指定します


<TD>
WIDTH="30"横幅を指定します(ピクセル）
HEIGHT="80"高さを指定します(ピクセル）
ALIGN="center"文章の横表示位置を(left,center,right等)で指定します
VALIGN="top"文章の縦表示位置を(top,middle,bottom等)で指定します
BGCOLOR="#000000"セルの背景色を指定します
COLSPAN="3"数字分だけ横方向にセルを連結します
ROWSPAN="2"数字分だけ縦方向にセルを連結します
BACKGROUND="img/item.gif"セルの背景画像を指定します


表を作るだけでもこれだけたくさん指定することができます。 でも、最初からいろいろ使うより、表示してみて直したいところに指定を増やしていったほうが わかりやすいかもしれません。 また、全体のレイアウトに使う時、枠線は表示しないと思いますが、思いどうりのレイアウトに なるまで、枠線を表示しておいたほうが、作りやすいと思います。 あとは、閉じ忘れは十分注意してください。ＩＥでは表示されても、他のブラウザでは 何も表示されないということがあります。


次へ（テーブルのはなし２）