2008.10.04

リストでテーブルを作成する

テーブルの各セルの幅を決めるには、各セルにスタイルで幅の指定をします。

<50pxのセルを6個並べる>

50px 50px 50px 50px 50px 50px
     
     

しかし、入れ子のセルにスタイルで幅を指定しても、その通りにはなりません。

<個別のセルを無くして入れ子のセルに大まかな幅を入れる>

100px 150px 50px
50px 150px 100px

これをテーブルタグを使わないで、リストで同じような物が出来ないか作成してみました。

  • 100px
  • 150px
  • 53px
  • 50px
  • 150px
  • 103px

最後のリストにはテーブルで作成したものと、見た目の幅を揃えるため、セルのボーダーの差分(3本)の3pxを足してあります。
今回は、各要素に直接スタイルを書いたため、とても長いソースになっていますが、外部読込みにすればそれほど大変ではありません。
しかし大きな欠点が有ります。テーブルのように中のテキストが改行になっても、成り行きでボーダーを見せてはくれません。

  • 100px
  • 150pxです。テキストが長くて改行になります。
  • 53px
  • 50px
  • 150px
  • 103px

リストを使う場合は、あらかじめ中に入れるものに合わせた高さを指定する事が必要になります。

---投稿者一言コメント---------- カラスが遊びに来ます。頭が良くて愛嬌がありますよ。
photo
hashimoto