Hobby > デザイン実験室 > Table

ここで扱うのはtable要素に関するものです．いわゆるテーブルレイアウトのためのものではなく，正しく表として利用するときにどんなことができるかなというのを考えます．

まったくの余談ですが，テーブルを使ってドット絵を描いている人たちがいたような気がします．検索するとヒットするのかな．いろんなことを考える人がいるものですね．

コメントしたいけれどもメールを送るのは面倒だなという方がいらっしゃいましたら，こちらのエントリにコメントしていただけると嬉しいです．

装飾いろいろ

セルの配色を変える

スタンダードな装飾だと思われます．パターン1は奇数行，偶数行のtrにそれぞれクラスを設定して背景色を変えています．パターン2は奇数列，偶数列毎に同じようにクラスを設定したもの．パターン3はthやtdに斜めになるようにクラスを指定しています．IE7，Firefox2，Safari3，Opera9のみ，テーブルにマウスホバーした時に背景色が変わります．

 見出し1見出し2見出し3見出し4見出し5
th1項目1項目2項目3項目4項目5
th2項目1項目2項目3項目4項目5
th3項目1項目2項目3項目4項目5
th4項目1項目2項目3項目4項目5
 見出し1見出し2見出し3見出し4見出し5
th1項目1項目2項目3項目4項目5
th2項目1項目2項目3項目4項目5
th3項目1項目2項目3項目4項目5
th4項目1項目2項目3項目4項目5
 見出し1見出し2見出し3見出し4見出し5
th1項目1項目2項目3項目4項目5
th2項目1項目2項目3項目4項目5
th3項目1項目2項目3項目4項目5
th4項目1項目2項目3項目4項目5

対応ブラウザ：IE6，IE7，Firefox2，Safari3，Opera9 » [XHTML+CSS]

jump to pagetop

その他

溢れたぶんをスクロール

tbodyにoverflowプロパティを指定することで溢れたぶんをスクロールさせることができるのはGeckoエンジンだけ．IEでもこれを表現するためにかなり無理をして作っています．SafariやOperaではデータがそのまま，全て表示されます．IE6では少し表示がずれますが，調整可能な範囲だと思います．

どのくらい無理をしているのかというと，条件付きコメントを使って<!--[if IE]><div id="nHlp"><table><![endif]-->
<tfoot>(中略)</tfoot>
<!--[if IE]></table></div><![endif]-->という風に記述し，IEの場合にのみtheadだけ，tfootだけ，tbodyだけの3つのテーブルが順に並ぶように作っています．その上でtfootとtbodyが入るdivにheight，overflow，positionの3つを指定して調整しています．力業ですね．

tableの中にdivを入れるのは文法違反なのですがコメントはコメントなのでバリデータは問題なく通るという不思議なマークアップです．ただし，最初に書いたようにSafariやOperaではどうにもなりませんし，バリデータを通るからといってもけして正しいマークアップになっているわけではないので，こんなことをするくらいならjavascriptなどの他の手段を探す方がよいと思います．

 見出し1見出し2見出し3見出し4見出し5
 フッタ1フッタ2フッタ3フッタ4フッタ5
th1項目1項目2項目3項目4項目5
th2項目1項目2項目3項目4項目5
th3項目1項目2項目3項目4項目5
th4項目1項目2項目3項目4項目5
th5項目1項目2項目3項目4項目5
th6項目1項目2項目3項目4項目5
th7項目1項目2項目3項目4項目5
th8項目1項目2項目3項目4項目5

対応ブラウザ: IE6(*), IE7, Fifefox2 » [XHTML+CSS]

jump to pagetop