戻る

テーブルのはなし２


今回は、もう少し違ったテーブルの使用方法を書いてみたいと思います。

☆模様を作ってみる

☆ plofile ☆
diary ★ column
☆ link ☆


こんな感じに作るにはテーブルの背景色を交互に変えます。
そして、セルとセルの間隔をあけないようにするためにCELLSPACING="0"を指定します。
あとは実際には中に書くものの位置を ALIGN や VALIGN で指定します。（下のタグでは省略してます）
☆印のところに画像を入れてワンポイントにしてもいいですよね。



<TABLE  BORDER="0"  CELLSPACING="0">
     <TR>
         <TD   WIDTH="50"   HEIGHT="50"   BGCOLOR="#FFFFFF">☆</TD>
         <TD   WIDTH="50"   HEIGHT="50"   BGCOLOR="#CAD4C1">plofile</TD>
         <TD   WIDTH="50"   HEIGHT="50"   BGCOLOR="#FFFFFF">☆</TD>
     </TR>
     <TR>
         <TD   WIDTH="50"   HEIGHT="50"   BGCOLOR="#CAD4C1">diary</TD>
         <TD   WIDTH="50"   HEIGHT="50"   BGCOLOR="#FFFFFF">★</TD>
         <TD   WIDTH="50"   HEIGHT="50"   BGCOLOR="#CAD4C1">column</TD>
     </TR>
     <TR>
         <TD   WIDTH="50"   HEIGHT="50"   BGCOLOR="#FFFFFF">☆</TD>
         <TD   WIDTH="50"   HEIGHT="50"   BGCOLOR="#CAD4C1">link</TD>
         <TD   WIDTH="50"   HEIGHT="50"   BGCOLOR="#FFFFFF">☆</TD>
     </TR>
</TABLE>




また、セルを増やすとこんなことも・・・。（あんまり意味ないけど）

　 　 　 　 　
　 　 　 　 　
　 　 　 　 　
　 　 　 　 　
　 　 　 　 　


　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　
　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　 　




☆タイトル部分に・・・

20XX/9/1X　今日はいったい・・・
今日は全く予測できないことが起こった。だれが一体何のためにあんなことをしたのだろうか。 よもやあんなことが起こるなんて。あんな不思議なことは夢の中くらいでしか起こることはないだろう。 ・・・だが、あれはまぎれもなく現実だ。私は夢と現実がわからなくなってきた。 誰かに聞いてみよう。・・・しかし、こんなばかげたことを人に聞いたら、私がおかしくなってのでは ないかと言われかねない。私がおかしくなっていないということがあきらかにわかっている人間に しか聞くことはできないが、今までおかしくなっていないとわかってくれた友人たちに おかしくなったと思われる危険性もある。。。それに夢でも見たんじゃないのかと言って それっきり取り合ってくれなくなる可能性だってある。ああ、私はどうしたらよいのだ。


これは一行目の背景の色を指定して、２行目に本文を書いているだけです。

<TABLE  BORDER="0"  WIDTH="450"  CELLSPACING="10"  CELLPADDING="5">
     <TR>
         <TD   BGCOLOR="#CAD4C1">
              ここにタイトル
         </TD>
     </TR>
     <TR>
         <TD>
              ここに本文
         </TD>
     </TR>
</TABLE>




ここまでは簡単ですよね？では次に少し高度（？）なテクニックを。

20XX/9/1X
今日は全く予測できないことが起こった。だれが一体何のためにあんなことをしたのだろうか。 よもやあんなことが起こるなんて。あんな不思議なことは夢の中くらいでしか起こることはないだろう。 ・・・だが、あれはまぎれもなく現実だ。私は夢と現実がわからなくなってきた。 誰かに聞いてみよう。・・・しかし、こんなばかげたことを人に聞いたら、私がおかしくなってのでは ないかと言われかねない。私がおかしくなっていないということがあきらかにわかっている人間に しか聞くことはできないが、今までおかしくなっていないとわかってくれた友人たちに おかしくなったと思われる危険性もある。。。それに夢でも見たんじゃないのかと言って それっきり取り合ってくれなくなる可能性だってある。ああ、私はどうしたらよいのだ。


これの構造は・・・

ここにタイトル
ここに本文


・・・とこんな感じです。
１行目は横のセルを結合させるので COLSPAN="2" と指定します。
（ここで復習・・・横方向に結合は「COLSPAN」縦方向の結合は「ROWSPAN」です）
そして「BGCOLOR」で背景の色を指定します。
２行目の本文は左のセルに画像、右側に本分を書き入れるます。
最初はわかりにくかったら、BORDERを１にして枠線を表示して出来たら０に戻すとわかりやすいです。

<TABLE  BORDER="0"  WIDTH="450"  CELLSPACING="10"  CELLPADDING="5">
     <TR>
         <TD   BGCOLOR="#CAD4E1"  COLSPAN="2">
              ここにタイトル
         </TD>
     </TR>
     <TR>
         <TD>
              <IMG  SRC="img/book.gif">
         </TD>
         <TD>
              ここに本文
         </TD>
     </TR>
</TABLE>


・・・とこんな感じです。いかがですか？



あとこの表の横幅ですが、上の例では「WIDTH="450"」と指定してますが、 これを７０％とかっていう指定にすると、見ている人の画面サイズに合わせて幅が 変わってきます。
こんな感じ（８０％に設定しました）
20XX/9/1X
今日は全く予測できないことが起こった。だれが一体何のためにあんなことをしたのだろうか。 よもやあんなことが起こるなんて。あんな不思議なことは夢の中くらいでしか起こることはないだろう。 ・・・だが、あれはまぎれもなく現実だ。私は夢と現実がわからなくなってきた。 誰かに聞いてみよう。・・・しかし、こんなばかげたことを人に聞いたら、私がおかしくなってのでは ないかと言われかねない。私がおかしくなっていないということがあきらかにわかっている人間に しか聞くことはできないが、今までおかしくなっていないとわかってくれた友人たちに おかしくなったと思われる危険性もある。。。それに夢でも見たんじゃないのかと言って それっきり取り合ってくれなくなる可能性だってある。ああ、私はどうしたらよいのだ。




どうですか？実際にブラウザのサイズを変えてみてください。 画面の大きさによって見やすくするためにそういった工夫もいいんじゃないかな って思います。 （とか言いつつ、最近は小さい画面にあわせて固定しちゃってますが・・・）



今回はとある知人に、あれどうやるのって聞かれたので、書いてみました。 下の方のは結構日記とかで多様してるので見たことあると思います。 テーブルってこういう使い方とかって邪道らしいんですが、 やっぱり重宝なので使ってしまいます。


次へ（文字のはなし）