デーブルのデザインを考える

【投稿日】2011年4月5日 22:29【表示回数】1 views

  • このエントリーをはてなブックマークに追加
  • Clip to Evernote

この記事はまだ編集中です!

表組を作る時には、今でもテーブルを使うのですが、このテーブルデザインが、これまたとても奥深い。

もちろん、テーブルを使う目的は表組をつかって、データを見やすく区分することなんだけど、ちょっとしたデザイン/配色を変えるだけで、さらに見やすくなったりするから、たくさんのネタをもっていた方がもちろんいいですね。

という訳で、少しずつストックしていこうと思います。

CSS
以下のテーブルを構成するCSSです。

テーブルスタイルA

データ1データ2
データ3データ4

テーブルスタイルB
データ1データ2
データ3データ4

テーブルスタイルC
データ1データ2
データ3データ4

テーブルスタイルD
データ1データ2
データ3データ4

テーブルスタイルE|ドットが重ならないように要微調節
データ1データ2
データ3データ4

テーブルスタイルF|一番上のセルがTH属性
データ1データ2
データ3データ4
データ5データ6

テーブルスタイルG
データ1データ2
データ3データ4

テーブルスタイルH
データ1データ2
データ3データ4

テーブルスタイルI
データ1データ2
データ3データ4
データ5データ6
データ7データ8

この記事が属するカテゴリー|CSS / HTML / TABLE

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">